/* ==========================================================================
   The Unnamed Archetype — aliyadaniels.ca/unnamedarchetype
   Loaded after global.css.
   ========================================================================== */

/* Base page frame (safe-area padding + base type size this page was designed on) */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{font-size:14px; line-height:normal;}

/* Layout concept: a single-column scroll, full-bleed hero photo giving way to
   quiet dark panels of alternating tone, with a narrow 680px reading
   measure for prose and a wider grid only for the four-phase cards. */
:root{
  --bg:#1E1815;
  --panel:#241D19;
  --fg:#EDE7E2;
  --fg-soft:#C9BFB8;
  --fg-faint:var(--steel);
  --accent:var(--tangerine);
  --line:rgba(237,231,226,0.1);
  /* Font files are declared in global.css. Body → Articulat CF (no font file
     licensed yet — falls back to the system sans until that file is added) */
  --serif:'IvyPresto Headline', Georgia, 'Times New Roman', serif;
  --subhead:'Nimbus Sans Extended', 'Helvetica Neue', Arial, sans-serif;
  --sans:'Articulat CF', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono:'Coordinates', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}


html{background:var(--bg);}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  margin:0;
  overflow-x:hidden;
  position:relative;
}
/* subtle paint-stroke grain over the whole page, like the brushed boards
   from the flyer explorations, so flat dark panels don't feel inert */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url(../images/unnamedarchetype/grain-texture.jpg);
  background-size:1100px auto;
  background-repeat:repeat;
  opacity:0.46;
  pointer-events:none;
  z-index:0;
}
body > *{position:relative; z-index:1;}
.deco{
  position:absolute;
  pointer-events:none;
  opacity:0.1;
  z-index:0;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding-inline:clamp(20px,5vw,100px);
}
.prose{max-width:960px;}
.center{margin-left:auto;margin-right:auto;text-align:center;}

section{padding-block:clamp(72px,10vw,128px); position:relative; overflow:hidden;}

.eyebrow{
  font-family:var(--subhead);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 20px 0;
}
h1,h2,h3{text-wrap:balance; font-family:var(--serif); font-weight:100; color:var(--fg); margin:0;}
h2{font-size:clamp(34px,4.6vw,54px); line-height:1.15; margin-bottom:28px; letter-spacing:0.01em;}
h3{font-size:26px; font-weight:100; margin-bottom:14px;}
p.body{font-size:18px; line-height:1.75; color:var(--fg-soft); margin:0 0 18px 0;}
p.body:last-child{margin-bottom:0;}
p.lede{font-family:var(--serif); font-style:italic; font-weight:100; font-size:clamp(20px,2.6vw,25px); line-height:1.55; color:var(--fg);}
p.lede strong{font-weight:700;}

.details-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px 22px;
  font-family:var(--mono); font-size:14px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--fg-faint);
}
.details-row .dot{color:var(--accent);}
.details-row .dot-spiral{
  display:inline-block; width:13px; height:13px; background:var(--accent);
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><path d="M12 12 C12 9 14 8 16 9 C19 10.5 19 15 15.5 16.5 C11 18.5 6 15.5 6.5 10.5 C7 5.5 13 3 18 6"/></svg>');
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><path d="M12 12 C12 9 14 8 16 9 C19 10.5 19 15 15.5 16.5 C11 18.5 6 15.5 6.5 10.5 C7 5.5 13 3 18 6"/></svg>');
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  vertical-align:middle;
}

/* Phones: the "Interested in joining?" row wraps unevenly and leaves spirals
   dangling at line ends, so stack it as a centered list with a spiral bullet
   on each. The hero row keeps its inline layout. */
@media (max-width:700px){
  :not(.hero-content) > .details-row{ flex-direction:column; gap:12px; }
  :not(.hero-content) > .details-row .dot-spiral{ display:none; }
  :not(.hero-content) > .details-row > span{ display:inline-flex; align-items:center; gap:10px; }
  :not(.hero-content) > .details-row > span::before{
    content:""; width:11px; height:11px; flex:none; background:var(--accent);
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><path d="M12 12 C12 9 14 8 16 9 C19 10.5 19 15 15.5 16.5 C11 18.5 6 15.5 6.5 10.5 C7 5.5 13 3 18 6"/></svg>') center / contain no-repeat;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><path d="M12 12 C12 9 14 8 16 9 C19 10.5 19 15 15.5 16.5 C11 18.5 6 15.5 6.5 10.5 C7 5.5 13 3 18 6"/></svg>') center / contain no-repeat;
  }
}

.btn{
  display:inline-block;
  font-family:var(--mono); font-size:13px; letter-spacing:0.12em; text-transform:uppercase;
  color:#16110F; background:var(--accent);
  padding:18px 42px; border-radius:2px; text-decoration:none;
  border:none; cursor:pointer;
}

/* top + bottom brand bars */
.brandbar{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding-block:32px;
}
.mark{
  /* logo artwork is graphite; this filter renders it in bone on the dark page */
  filter:brightness(0) invert(0.94);
  object-fit:contain;
  display:block;
}
.emblem-mark{width:13px; height:23px;}
.wordmark-mark{width:150px; height:15px;}


.eyebrow-intro{
  font-family:var(--serif);
  font-style:italic;
  font-weight:100;
  font-size:clamp(17px,2.2vw,21px);
  letter-spacing:0.01em;
  text-transform:none;
  color:var(--cream);
  max-width:none;
  margin-inline:auto;
}
@media (min-width:701px){ .eyebrow-intro{ white-space:nowrap; } }

/* hero */
.hero{
  position:relative;
  min-height:min(980px, 135vw);
  display:flex; align-items:flex-end; justify-content:center;
  padding-block:0;
  text-align:center;
  overflow:hidden;
}
.hero-media{position:absolute; inset:0; overflow:hidden;}
.hero-media .photo{
  position:absolute; inset:0;
  background-image:url(../images/unnamedarchetype/hero-photo.jpg);
  background-repeat:no-repeat;
  background-size:120% auto;
  /* Photo is 120% of viewport width (so ~180vw tall) and Aliya's eyes sit
     ~92vw down it. This keeps her eyes ~20% down the hero (hero height =
     min(980px,135vw)) at every screen width, clear of the title. The max()
     stops the photo ending above the bottom of the hero on narrow phones. */
  background-position:50% max(calc(min(980px, 135vw) * 0.2 - 92vw), calc(min(980px, 135vw) - 180vw));
  filter:saturate(0.88) contrast(1.06) brightness(0.92) sepia(0.14);
  opacity:0.92;
}
.hero-media .scrim{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 22%, rgba(22,17,15,0.1) 0%, rgba(22,17,15,0.5) 26%, rgba(22,17,15,0.88) 46%, rgba(22,17,15,1) 68%);
}
.hero-content{position:relative; padding:0 20px 32px; max-width:760px;}
.hero-content .eyebrow{display:block;}
.hero h1{
  font-size:clamp(46px,9vw,104px);
  line-height:1.03;
  text-transform:uppercase;
  margin-bottom:26px;
}
.hero h1 .accent{color:var(--accent);}
.hero .tagline{
  font-family:var(--serif); font-style:italic; font-weight:100;
  font-size:clamp(19px,2.6vw,25px);
  color:var(--cream);
  margin:0 0 36px 0;
}
.hero .details-row{margin-bottom:40px;}

/* Phones: stack the hero — photo on top (framed on Aliya, fading into the
   page at the bottom), then the title, text and button underneath it. */
@media (max-width:700px){
  .hero{ display:block; min-height:0; padding-bottom:56px; }
  .hero-media{ position:relative; inset:auto; aspect-ratio:4 / 5; }
  .hero-media .photo{ background-size:140% auto; background-position:50% 85%; }
  .hero-media .scrim{
    background:linear-gradient(to bottom, rgba(22,17,15,0.45) 0%, rgba(22,17,15,0) 22%, rgba(22,17,15,0) 48%, var(--bg) 100%);
  }
  /* Pull the intro, title and button up over the faded bottom of the photo
     so more of it shows without scrolling */
  .hero-content{ margin:-180px auto 0; padding:0 20px; }
}

/* alternating panel background */
.panel{background:var(--panel);}

/* two column */
.split{display:flex; align-items:center; gap:clamp(32px,6vw,90px); flex-wrap:wrap;}
.split > div{flex:1 1 320px; min-width:0;}
.split img.feature{width:100%; max-width:56px; height:auto; opacity:0.3; margin-inline:auto;}

/* signs list */
.signs-grid{
  list-style:none; margin:48px 0 0; padding:0;
  /* two newspaper-style columns: each item sits right under the one before,
     so a short item never leaves a gap next to a long one */
  columns:2; column-gap:48px;
}
.signs-grid li{ break-inside:avoid; margin-bottom:16px; }
@media (max-width:700px){ .signs-grid{columns:1;} }
.signs-grid.blue{ columns:1; } /* What's Included stays a single list */
.signs-grid li{
  position:relative; padding-left:26px;
  font-size:16px; line-height:1.6; color:var(--fg-soft);
}
.signs-grid.blue li::before{background:var(--accent);}
.signs-grid li::before{
  content:""; position:absolute; left:0; top:2px;
  width:16px; height:16px; background:var(--accent);
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><path d="M12 12 C12 9 14 8 16 9 C19 10.5 19 15 15.5 16.5 C11 18.5 6 15.5 6.5 10.5 C7 5.5 13 3 18 6"/></svg>');
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><path d="M12 12 C12 9 14 8 16 9 C19 10.5 19 15 15.5 16.5 C11 18.5 6 15.5 6.5 10.5 C7 5.5 13 3 18 6"/></svg>');
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}

/* four phase cards */
.phase-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:56px;
}
@media (max-width:860px){ .phase-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){
  .phase-grid{ gap:12px; }
  .phase-card{ padding:26px 14px; }
  .phase-card h3{ font-size:22px; }
  .phase-card p{ font-size:14px; }
  .phase-card .month{ font-size:10px; letter-spacing:0.1em; }
}
.phase-card{
  background:var(--panel);
  border-radius:4px;
  padding:40px 26px;
  text-align:left;
  min-width:0;
}
/* on a panel-coloured section, use the darker page colour so cards still stand out */
.panel .phase-card{ background:var(--bg); }
.phase-card img{display:block; width:auto; max-width:64px; height:56px; object-fit:contain; object-position:bottom; margin:0 auto 24px; opacity:0.95;}
.phase-card .month{font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-faint); margin:0 0 8px 0;}
.phase-card h3{font-size:27px; margin-bottom:12px;}
.phase-card p{font-size:15.5px; line-height:1.65; color:var(--fg-soft); margin:0;}

/* session calendar chips */
.cal-time{ font-family:var(--mono); font-size:clamp(16px,1.8vw,19px); font-weight:400; letter-spacing:0.04em; line-height:1.6; color:var(--fg); margin:0 0 24px; }
.cal-grid{
  display:grid; grid-template-columns:repeat(2,minmax(200px,240px));
  gap:12px; justify-content:center;
  margin:40px 0 28px;
}
@media (max-width:560px){ .cal-grid{grid-template-columns:minmax(200px,240px);} }
.cal-chip{
  font-family:var(--mono); font-size:13px; letter-spacing:0.04em;
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 20px;
  white-space:nowrap;
  text-align:center;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.moon-icon{
  display:inline-block; width:11px; height:11px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--fg);
}
.moon-icon.full{background:var(--fg);}
.moon-icon.new{background:transparent;}
.cal-chip .moon{color:var(--fg);}

/* included list */
.included-grid{display:flex; gap:clamp(24px,5vw,60px); flex-wrap:wrap; margin-top:56px;}
.included-grid > div{flex:1 1 320px; min-width:0;}
.included-item{display:flex; gap:18px; margin-bottom:34px; align-items:flex-start;}
.included-item img{width:28px; height:auto; flex-shrink:0; margin-top:4px; opacity:0.85;}
.included-item h4{font-family:var(--sans); font-weight:600; font-size:18px; color:var(--fg); margin:0 0 8px 0;}
.included-item p{font-family:var(--sans); font-size:15.5px; line-height:1.6; color:var(--fg-soft); margin:0; max-width:420px;}

/* testimonials */
.testimonial-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
  margin-top:56px; text-align:left;
}
@media (max-width:900px){ .testimonial-grid{grid-template-columns:1fr;} }
.testimonial{
  background:rgba(237,231,226,0.05); border:1px solid var(--line); border-radius:4px; padding:32px 28px;
}
.testimonial p{font-family:var(--serif); font-style:italic; font-weight:100; font-size:18px; line-height:1.55; color:var(--fg); margin:0 0 20px 0;}
.testimonial cite{font-family:var(--mono); font-style:normal; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-faint);}

/* Q&A */
.qa-list{margin-top:48px; display:grid; gap:36px;}
.qa-item h4{font-family:var(--serif); font-weight:100; font-style:italic; font-size:21px; color:var(--fg); margin:0 0 8px 0;}
.qa-item p{font-family:var(--sans); font-size:15.5px; line-height:1.65; color:var(--fg-soft); margin:0;}
.qa-item a.qa-link{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

.divider{height:1px; background:var(--line); border:none; margin:0;}

.closing-note{font-family:var(--mono); font-size:12.5px; color:var(--fg-faint); font-style:italic; margin-top:18px;}
/* "This is your invitation." — the button is the last thing, so less space below it */
#interest{ padding-bottom:clamp(48px,6vw,72px); }
.invest-line{font-family:var(--mono); font-size:14px; letter-spacing:0.04em; color:var(--fg-soft); margin:22px 0 0;}

/* story modal */
.modal-overlay{
  /* above the site menu (z-index 60) so the menu doesn't show through */
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(10,8,7,0.82); backdrop-filter:blur(2px);
  padding:48px 20px; overflow-y:auto;
}
.modal-overlay.open{display:block;}
.modal-card{
  position:relative; max-width:640px; margin:0 auto;
  background:var(--panel); border:1px solid var(--line);
  padding:clamp(32px,6vw,64px); border-radius:4px;
}
.modal-card .eyebrow{text-align:center;}
.modal-card h2{text-align:center; margin-bottom:28px; font-size:clamp(26px,3.4vw,36px); line-height:1.2;}
.modal-card .body{margin-bottom:20px;}
.modal-close{
  position:absolute; top:18px; right:18px;
  width:32px; height:32px; border-radius:50%;
  background:none; border:1px solid var(--line); color:var(--fg-soft);
  font-size:20px; line-height:1; cursor:pointer;
}
.modal-close:hover{color:var(--fg); border-color:var(--fg-soft);}

/* Layout concept: a single centered card wizard on the brand's Bone
   surface, with Cream for the card and white insets for fields —
   the light counterpart to the dark landing page, so "Ready to Join"
   still feels like the same site rather than a hand-off to a generic
   form tool. */


.jf-shell button{font:inherit;}

.jf-shell{
  --bg:var(--bone);
  --panel:var(--bone);
  --panel-2:#FFFFFF;
  --fg:#3C3433;
  --fg-soft:#5C5452;
  --fg-faint:#5C5452;
  --accent-soft:rgba(254,83,33,0.12);
  --line:rgba(60,52,51,0.16);
  --danger:#A83D27;
  color-scheme:light;
  position:relative; z-index:1; max-width:620px; margin:0 auto;
  padding-block:clamp(28px,6vw,56px) 60px;
  min-height:100%;
  display:flex; flex-direction:column; align-items:center;
}

.jf-topbar{display:flex; align-items:center; gap:10px; margin-bottom:clamp(28px,6vw,44px);}
/* white stacked logo — the form sits on the dark page overlay */
.jf-logo{ display:block; width:96px; height:auto; }

/* stepper */
.jf-stepper{ display:flex; align-items:flex-start; justify-content:center; gap:0; width:100%; max-width:480px; margin-bottom:clamp(30px,6vw,46px); }
.jf-stepper .jf-node{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1 1 0; position:relative; }
.jf-stepper .jf-node::before{
  content:""; position:absolute; top:12px; left:-50%; width:100%; height:1px; background:rgba(240,240,240,0.25); z-index:0;
}
.jf-stepper .jf-node:first-child::before{display:none;}
.jf-stepper .jf-dot{
  width:25px; height:25px; border-radius:50%; border:1px solid var(--line); background:var(--panel);
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
  font-family:var(--mono); font-weight:500; font-size:11px; color:var(--fg-faint);
}
.jf-stepper .jf-label{ font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--bone); text-align:center; }
.jf-stepper .jf-node.jf-active .jf-dot{ border-color:var(--accent); color:var(--fg); background:var(--accent); font-weight:600; }
.jf-stepper .jf-node.jf-active .jf-label{ color:var(--accent); }
.jf-stepper .jf-node.jf-step-done .jf-dot{ border:2px solid var(--accent); background:var(--bone); color:var(--fg); }
.jf-stepper .jf-node.jf-step-done::before{ background:var(--accent); }
@media (max-width:480px){ .jf-stepper .jf-label{display:none;} }

.jf-card{
  width:100%; background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:clamp(28px,6vw,52px); position:relative;
}
/* form steps are <section>s — undo the page-wide section spacing inside the card */
.jf-card > section{ padding-block:0; overflow:visible; }

.jf-eyebrow{ font-family:var(--subhead); font-weight:700; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--fg); margin:0 0 16px 0; }
.jf-shell h1,.jf-shell h2{ font-family:var(--serif); font-weight:100; color:var(--fg); margin:0 0 14px 0; text-wrap:balance; line-height:1.12; }
.jf-shell h1{font-size:clamp(28px,5vw,38px);}
.jf-shell h2{font-size:clamp(24px,4vw,32px); line-height:1.2;}
p.jf-lede{ font-size:16px; line-height:1.65; color:var(--fg-soft); margin:0 0 8px 0; max-width:50ch; }
p.jf-fine{ font-family:var(--mono); font-weight:400; font-size:12.5px; line-height:1.6; color:var(--fg-faint); margin:0; }

.jf-expect{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; }
.jf-expect li{ display:flex; gap:12px; font-size:14.5px; line-height:1.5; color:var(--fg-soft); }
.jf-expect li .jf-num{ font-family:var(--mono); font-weight:600; color:var(--fg); flex:0 0 auto; }

.jf-field{ margin-bottom:20px; }
.jf-field label{ display:block; font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:8px; }
.jf-field label.jf-question{ font-family:var(--sans); font-weight:500; font-size:15.5px; letter-spacing:0; text-transform:none; color:var(--fg); line-height:1.45; margin-bottom:10px; }
.jf-field label.jf-title-style{ display:block; font-family:var(--serif); font-weight:100; font-size:clamp(24px,4vw,32px); line-height:1.2; letter-spacing:0; text-transform:none; color:var(--fg); margin-bottom:16px; text-wrap:balance; }
.jf-field label.jf-title-style .jf-tag{ display:block; font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:0.04em; color:var(--fg-soft); margin-top:8px; }
.jf-field .jf-hint, .jf-shell .jf-hint{ font-family:var(--sans); font-size:13px; color:var(--fg-faint); margin:6px 0 0; line-height:1.5; }
.jf-field input[type="text"], .jf-field input[type="email"], .jf-field input[type="tel"], .jf-field input[type="date"], .jf-field input[type="time"], .jf-field textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:3px;
  padding:13px 14px; color:var(--fg); font-family:var(--sans); font-size:15px; line-height:1.4;
}
.jf-field textarea{ resize:vertical; min-height:88px; font-family:var(--sans); }
.jf-field input::placeholder, .jf-field textarea::placeholder{ color:var(--fg-faint); opacity:0.7; }
.jf-field input:focus, .jf-field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.jf-field input.jf-invalid, .jf-field textarea.jf-invalid{ border-color:var(--danger); }
/* Stripe card fields (secure iframes) — styled to match the inputs above */
.jf-field .jf-stripe-input{ background:var(--panel-2); border:1px solid var(--line); border-radius:3px; padding:14px; min-height:48px; }
.jf-field .jf-stripe-input.StripeElement--focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.jf-field .jf-stripe-input.StripeElement--invalid{ border-color:var(--danger); }
.jf-pay-error{ font-family:var(--mono); font-size:12.5px; line-height:1.5; color:var(--danger); margin:0 0 4px; }
.jf-field .jf-err{ display:none; font-family:var(--mono); font-size:11.5px; color:var(--danger); margin-top:6px; }
.jf-field.jf-show-err .jf-err{ display:block; }
.jf-row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:480px){ .jf-row2{grid-template-columns:1fr;} }

.jf-check-row{ display:flex; gap:12px; align-items:flex-start; margin-top:6px; }
.jf-check-row input[type="checkbox"]{ width:19px; height:19px; margin-top:2px; accent-color:var(--accent); flex:0 0 auto; }
.jf-check-row label{ font-size:14px; line-height:1.55; color:var(--fg-soft); font-family:var(--sans); font-weight:400; letter-spacing:normal; text-transform:none; margin-bottom:0; }
.jf-shell .jf-et-switch{ display:inline-block; margin:10px 0 0 31px; padding:0; background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:12.5px; letter-spacing:0.02em; color:var(--fg); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; text-align:left; }
.jf-shell .jf-et-switch:hover{ color:var(--accent); }

.jf-plan-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.jf-plan-option{ text-align:left; background:var(--panel-2); border:1px solid var(--line); border-radius:4px; padding:14px 16px; cursor:pointer; font-family:var(--sans); transition:border-color 0.15s, background 0.15s; }
.jf-plan-option:hover{ border-color:var(--fg-soft); }
.jf-plan-option.jf-active{ border-color:var(--accent); background:var(--accent-soft); }
.jf-plan-name{ display:block; font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg); margin-bottom:4px; }
.jf-plan-sub{ display:block; font-size:13px; color:var(--fg-soft); line-height:1.4; }
/* TEMPORARY $5 test option: full width under the two real options */
.jf-plan-option[data-plan="test"]{ grid-column:1 / -1; border-style:dashed; }
.jf-plan-option[hidden]{ display:none; }
@media (max-width:480px){ .jf-plan-toggle{grid-template-columns:1fr;} }

.jf-waiver{ background:var(--panel-2); border:1px solid var(--line); border-radius:4px; padding:20px 22px; max-height:260px; overflow-y:auto; margin-bottom:18px; }
.jf-waiver p{ font-size:14px; line-height:1.65; color:var(--fg-soft); margin:0 0 14px 0; }
.jf-waiver p:last-child{ margin-bottom:0; }

.jf-summary{ background:var(--panel-2); border:1px solid var(--line); border-radius:4px; padding:20px 22px; margin-bottom:24px; }
.jf-summary .jf-line{ display:flex; justify-content:space-between; gap:12px; font-size:14.5px; color:var(--fg-soft); padding-block:7px; }
.jf-summary .jf-line.jf-total{ border-top:1px solid var(--line); margin-top:4px; padding-top:14px; color:var(--fg); font-family:var(--mono); font-weight:500; }
.jf-summary .jf-line .jf-k{color:var(--fg-faint);}
.jf-summary .jf-meta{ font-family:var(--mono); font-size:12px; color:var(--fg-faint); margin-top:10px; letter-spacing:0.02em; }
.jf-summary .jf-recurring-note{ font-size:13.5px; line-height:1.6; color:var(--fg); background:var(--accent-soft); border-left:2px solid var(--accent); padding:12px 14px; margin:14px 0 4px; }
.jf-summary .jf-recurring-note strong{ font-weight:600; }

/* The card mockup stays a dark Graphite card with light text on purpose,
   like a real card, regardless of the page's own light/dark palette —
   so its colors are fixed here rather than drawn from the page tokens. */
.jf-card-visual{
  border-radius:4px; padding:18px 20px; margin-bottom:22px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, #4A4140, #27201E);
  border:1px solid rgba(0,0,0,0.2);
}
.jf-card-visual .jf-chip{ width:30px; height:22px; border-radius:4px; background:linear-gradient(135deg,#8B939E,#BAC2D3); margin-bottom:22px; }
.jf-card-visual .jf-num{ font-family:var(--mono); font-size:17px; letter-spacing:0.08em; color:#EDE7E2; font-variant-numeric:tabular-nums; min-height:22px; }
.jf-card-visual .jf-meta-row{ display:flex; justify-content:space-between; margin-top:16px; }
.jf-card-visual .jf-meta-row .jf-lbl{ font-family:var(--mono); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:#B8AFA9; display:block; margin-bottom:4px; }
.jf-card-visual .jf-meta-row .jf-val{ font-family:var(--mono); font-size:13px; color:#D9D2CC; font-variant-numeric:tabular-nums; }

.jf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:0.1em; text-transform:uppercase;
  padding:16px 30px; border-radius:3px; border:none; cursor:pointer; width:100%;
}
.jf-btn-primary{ background:var(--accent); color:var(--fg); }
.jf-btn-primary:disabled{ opacity:0.4; cursor:not-allowed; }
.jf-btn-primary:not(:disabled):hover{ filter:brightness(1.06); }
.jf-btn-ghost{ background:transparent; color:var(--fg-soft); border:1px solid var(--line); }
.jf-btn-ghost:hover{ color:var(--fg); border-color:var(--fg-soft); }
.jf-actions{ display:flex; gap:14px; margin-top:28px; }
.jf-actions .jf-btn-ghost{ width:auto; flex:0 0 auto; padding-inline:22px; }
.jf-actions .jf-btn-primary{ flex:1 1 auto; }

.jf-spinner{ width:15px; height:15px; border-radius:50%; border:2px solid rgba(60,52,51,0.35); border-top-color:var(--fg); animation:spin 0.7s linear infinite; display:none; }
.jf-is-loading .jf-spinner{ display:inline-block; }
.jf-is-loading .jf-btn-label{ opacity:0.8; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.jf-done-wrap{ text-align:center; padding-block:12px; }
.jf-done-emblem{ display:block; width:30px; height:52px; object-fit:contain; margin:0 auto 26px; }
.jf-done-wrap h1{ text-align:center; }
.jf-done-wrap p.jf-lede{ max-width:46ch; margin-inline:auto; }
.jf-confirm-code{ font-family:var(--mono); font-size:12.5px; color:var(--fg-faint); margin-top:28px; letter-spacing:0.04em; }

.jf-modal-close{
  position:fixed; top:18px; right:18px; z-index:60;
  width:32px; height:32px; border-radius:50%;
  background:rgba(30,24,21,0.55); border:1px solid var(--line); color:var(--fg-soft);
  font-size:20px; line-height:1; cursor:pointer; backdrop-filter:blur(2px);
}
.jf-modal-close:hover{color:var(--fg); border-color:var(--fg-soft);}
/* Phones: move the close button to the bottom right, a bigger tap target,
   clear of the top of the screen */
@media (max-width:700px){
  .jf-modal-close{
    top:auto; bottom:calc(18px + env(safe-area-inset-bottom,0px)); right:18px;
    width:48px; height:48px; font-size:26px;
    background:rgba(30,24,21,0.85); color:var(--fg);
  }
  /* room below the form so the button never covers Continue */
  .modal-overlay{ padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)); }
}


/* Pairs of photos (above Who This Is For / About Your Guide) — always side
   by side, each box shaped like its photos so nothing important is cropped,
   and scaling down proportionally on phones. */
.photo-pair{ max-width:820px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.photo-pair img{ width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; object-position:50% 30%; border-radius:2px; }
@media (max-width:700px){ .photo-pair{ gap:8px; } }