/* Reset and basics */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
}

/* Layout */
.standalone-signup-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Background diagonal */
.background-diagonal {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to right bottom, #f8965e, #ea6a30);
  z-index: -1;
  transform: skewY(-5deg) translateY(40%);
}

.left-panel {
  flex: 1;
  padding: 4rem 3rem;
  position: relative;
  justify-content: flex-end;
  display: flex;
}

.right-panel {
  flex: 1;
  padding: 4rem 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  margin-bottom: 4rem;
}

.logo img {
  max-width: 100%;
  height: auto;
}

.logo-text {
  font-size: 2.5rem;
  font-weight: 600;
  color: #333;
}

.logo-nudge {
  font-size: 1.1rem;
  color: #999;
  margin-left: 5px;
  align-self: flex-end;
  margin-bottom: 5px;
}

/* Features */
.feature {
  margin-bottom: 2.5rem;
  padding-left: 1rem;
  border-left: 3px solid transparent;
  position: relative;
}

.feature:nth-child(1) {
  border-color: #f8c393;
}

.feature:nth-child(2) {
  border-color: #f48f64;
}

.feature:nth-child(3) {
  border-color: #e76331;
}

.feature h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.feature p {
  color: #666;
  font-size: 1rem;
}

/* Testimonials */
.testimonials {
  margin-top: 3rem;
}

.coach-profiles {
  display: flex;
  margin-bottom: 1rem;
}

.coach-profiles img {
  width: 100%;
  max-width: 200px;
  height: auto;
}

.stars {
  color: #FFD700;
  font-size: 1.5rem;
  display: flex;
  margin-bottom: 0.3rem;
}

.star-image {
  width: 100%;
  max-width: 140px;
  height: auto;
}

.star {
  margin-right: 0.1rem;
}
.rating {
  display: flex;
  align-items: center;
  gap: 40px;
}

.rating p {
  font-size: 1.3rem;
  font-weight: 500;
}

/* Form area */
.signup-form {
  width: 100%;
  max-width: 80%;
  background: white;
  padding: 2.5rem 5rem;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.07);
}

.signup-form h2 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
}

.signup-benefits {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  color: #666;
  font-size: 0.85rem;
  justify-content: center;
}

.signup-benefits span {
  display: flex;
  align-items: center;
}

.signup-benefits span:before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>');
  background-size: contain;
  margin-right: 5px;
  border: 1px solid;
  border-radius: 30px;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 0.95rem;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.9rem;
  border: 1px solid #bcbcbc;
  border-radius: 6px;
  font-size: 1rem;
  border-radius: 12px;
}

.country-select {
  position: relative;
}

.country-select select {
  appearance: none;
  padding-right: 30px;
}

.country-select:after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  pointer-events: none;
}

.create-account-btn {
  width: 100%;
  padding: 1rem;
  background-color: #f17b49;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.create-account-btn:hover {
  background-color: #e56e3d;
}

.login-link {
  text-align: center;
  margin-top: 1.5rem;
  color: #666;
  font-size: 0.95rem;
}

.login-link a {
  color: #5377f7;
  text-decoration: none;
  font-weight: 500;
}

.login-link a:hover {
  text-decoration: underline;
}

/* Info icon */
.info-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #eee;
  color: #999;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  font-size: 12px;
  margin-left: 5px;
  cursor: help;
}

/* Flag */
.flag {
  width: 20px;
  height: 14px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}

/* Responsive */
@media (max-width: 1200px) {
  .signup-form {
    max-width: 90%;
    padding: 2rem 3rem;
  }
  
  .left-panel {
    padding: 3rem 2rem;
  }
  
  .right-panel {
    padding: 3rem 2rem;
  }
}

@media (max-width: 992px) {
  .standalone-signup-container {
    flex-direction: column-reverse; /* Form on top for smaller screens */
  }

  .left-panel, .right-panel {
    padding: 2rem;
    flex: none;
  }
  
  .left-panel {
    justify-content: center;
  }
  
  .left-panel > div {
    max-width: 90%;
  }

  .signup-form {
    max-width: 100%;
    padding: 2rem;
  }

  .background-diagonal {
    height: 40%;
    transform: skewY(-5deg) translateY(70%);
  }
}

@media (max-width: 768px) {
  .signup-form {
    padding: 1.5rem 2rem;
  }
  
  .rating {
    gap: 20px;
  }
  
  .rating p {
    font-size: 1.1rem;
  }
}

@media (max-width: 576px) {
  .standalone-signup-container {
    min-height: auto;
  }
  
  .left-panel, .right-panel {
    padding: 1.5rem;
  }
  
  .left-panel > div {
    max-width: 100%;
  }

  .signup-form {
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }

  .signup-benefits {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  
  .logo {
    margin-bottom: 2rem;
    justify-content: center;
  }
  
  .feature {
    padding-left: 0.75rem;
    margin-bottom: 1.5rem;
  }
  
  .feature h3 {
    font-size: 1.2rem;
  }
  
  .feature p {
    font-size: 0.95rem;
  }
  
  .rating {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .form-group {
    margin-bottom: 1.2rem;
  }
  
  .form-group input,
  .form-group select {
    padding: 0.8rem;
  }
}

@media (max-width: 380px) {
  .signup-form h2 {
    font-size: 1.5rem;
  }
  
  .signup-benefits {
    font-size: 0.8rem;
  }
  
  .create-account-btn {
    padding: 0.8rem;
  }
}
/* ─────────────────────────────────────────────────────────────────────────
   Journey palette for sign up.

   Appended rather than edited in place: the layout above works and the brief
   was to keep it, so this changes only surface (the orange ground becomes the
   gold wave, white becomes warm cream) and adds the hairline structure the
   dashboard and the sign-in screen use. Same tokens as auth.css, so the three
   surfaces a coach sees before they are signed in read as one product.
   ───────────────────────────────────────────────────────────────────────── */
.standalone-body{
  --a-cream:#F7F3E9;
  --a-card:#FFFFFF;
  --a-ink:#151412;
  --a-ink-2:#5F5E58;
  --a-ink-3:#8A8679;
  --a-line:#E7E1D2;
  --a-gold:#C4A35A;
  --a-gold-deep:#AD8C43;
  --a-gold-text:#7C6126;
  --a-sans:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --a-serif:'Lora',Georgia,"Times New Roman",serif;

  font-family:var(--a-sans);
  color:var(--a-ink);
  background:var(--a-cream);
}

/* The skewed orange wedge becomes the gold wave, which is already the right
   shape: it sweeps across the bottom and leaves the top two thirds clear. */
.standalone-body .background-diagonal{
  position:fixed; inset:0; height:100%;
  background:var(--su-art) bottom center / cover no-repeat;
  transform:none; z-index:0; pointer-events:none;
}
.standalone-body .standalone-signup-container{position:relative; z-index:1}
.standalone-body .left-panel,
.standalone-body .right-panel{position:relative; z-index:1}

/* Brand lockup, same proportions as the dashboard rail: the wordmark sits
   close to the mark and slightly under its height. */
.standalone-body .logo{display:flex; align-items:center; gap:10px; margin-bottom:3.2rem}
.standalone-body .logo img{max-width:none}
.standalone-body .logo .sm{width:68px; height:auto; display:block}
.standalone-body .logo .sw{height:50px; width:auto; display:block}

/* Was an inline max-width on the element, which no media query could reach. */
.standalone-body .lp-inner{max-width:70%}
@media (max-width: 992px){ .standalone-body .lp-inner{max-width:90%} }

/* Structure from rules, not from fills. */
.standalone-body .feature{border-left:3px solid var(--a-line); padding-left:1rem}
.standalone-body .feature + .feature{margin-top:1.6rem}
.standalone-body .feature:nth-of-type(1){border-color:#EBDFC2}
.standalone-body .feature:nth-of-type(2){border-color:#D9C286}
.standalone-body .feature:nth-of-type(3){border-color:var(--a-gold)}
.standalone-body .feature h3{font-family:var(--a-serif); font-weight:500; color:var(--a-ink)}
.standalone-body .feature p{color:var(--a-ink-2)}
.standalone-body .testimonials{
  margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--a-line);
}
.standalone-body .rating p{color:var(--a-ink-2)}

.standalone-body .signup-form{
  background:var(--a-card);
  border:1px solid var(--a-line);
  border-radius:18px;
  box-shadow:0 1px 2px rgba(60,50,20,.04),0 24px 60px -30px rgba(60,50,20,.30);
}
.standalone-body .signup-form h2{
  font-family:var(--a-serif); font-weight:500; letter-spacing:-.01em; color:var(--a-ink);
}
.standalone-body .signup-benefits{
  padding-bottom:1.1rem; margin-bottom:.4rem;
  border-bottom:1px solid var(--a-line);
  color:var(--a-ink-3);
}

.standalone-body .form-group label{font-size:13px; font-weight:600; color:var(--a-ink-2)}
.standalone-body .form-group input,
.standalone-body .form-group select,
.standalone-body .country-select select{
  width:100%; padding:10px 12px;
  background:var(--a-card);
  border:1px solid var(--a-line); border-radius:10px;
  font-family:var(--a-sans); font-size:14.5px; color:var(--a-ink);
  box-shadow:0 1px 2px rgba(60,50,20,.05);
  transition:border-color .12s, box-shadow .12s;
}
.standalone-body .form-group input:focus,
.standalone-body .form-group select:focus,
.standalone-body .country-select select:focus{
  outline:none; border-color:var(--a-gold);
  box-shadow:0 0 0 3px rgba(196,163,90,.22);
}
.standalone-body .info-icon{
  background:var(--a-line); color:var(--a-gold-text);
  border:none;
}

.standalone-body .create-account-btn{
  width:100%; padding:11px 16px;
  background:var(--a-gold); border:1px solid var(--a-gold);
  border-radius:10px;
  font-family:var(--a-sans); font-size:14.5px; font-weight:600; color:#FFFDF8;
  cursor:pointer; transition:background .14s, border-color .14s;
}
.standalone-body .create-account-btn:hover{
  background:var(--a-gold-deep); border-color:var(--a-gold-deep);
}

.standalone-body .login-link{
  margin-top:1.2rem; padding-top:1.1rem;
  border-top:1px solid var(--a-line);
  text-align:center; font-size:13.5px; color:var(--a-ink-2);
}
.standalone-body .login-link a{color:var(--a-gold-text); font-weight:600; text-decoration:none}
.standalone-body .login-link a:hover{text-decoration:underline}

/* Copyright, bottom left, on the rule. */
.standalone-body .standalone-foot{
  position:fixed; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:22px;
  padding:16px max(24px,3rem);
  border-top:1px solid var(--a-line);
  background:rgba(247,243,233,.86);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:12.5px; color:var(--a-ink-2);
}
.standalone-body .standalone-foot a{color:var(--a-ink-2); text-decoration:none}
.standalone-body .standalone-foot a:hover{color:var(--a-ink); text-decoration:underline}
.standalone-body{padding-bottom:56px}

@media (max-width: 760px){
  /* A pinned footer sits on top of the last line of the form on a phone, so it
     rejoins the flow instead. */
  .standalone-body .standalone-foot{
    /* Static would lose to .background-diagonal, which is fixed with z-index:0
       and therefore paints over anything unpositioned. Relative keeps it in the
       flow and above the artwork. */
    position:relative; z-index:1; justify-content:center; padding:18px 20px 24px;
    background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
    border-top:none;
  }
  /* The artwork is fixed to the viewport while this page scrolls, so any block
     of copy crosses the deep part of the wave sooner or later. Measured on the
     phone: the testimonial line was 2.61:1 and the copyright 3.23:1 against the
     gold. The form card already carries its own ground; on a phone the value
     props and the footer get one too, which is the same cream scrim used for
     the sign-in chrome. */
  .standalone-body .lp-inner{
    max-width:100%;
    background:rgba(250,247,240,.93);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid var(--a-line); border-radius:18px;
    padding:24px 20px;
  }
  .standalone-body .standalone-foot{
    background:rgba(250,247,240,.93);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--a-line);
  }
  .standalone-body{padding-bottom:0}
  .standalone-body .standalone-signup-container{overflow:visible}
  .standalone-body .logo{justify-content:center; margin-bottom:2rem}
}

@media (max-width: 760px){ .standalone-body .left-panel{padding:1.25rem} }

/* The doubled lockup made the left column taller than a 900px viewport, and the
   container clipped the overflow, so the mark lost its top. The page scrolls
   instead of clipping, and the column reclaims the height the lockup took. */
.standalone-body .standalone-signup-container{overflow:visible; align-items:center}
.standalone-body .left-panel,
.standalone-body .right-panel{padding-top:2.5rem; padding-bottom:2.5rem}
.standalone-body .logo{margin-bottom:1.9rem}
@media (max-width: 992px){
  .standalone-body .left-panel{padding-top:2rem; padding-bottom:2rem}
}