/* SimoneCR brand: bougainvillea palette, Figtree headlines and body,
   Figtree text, Bodoni Moda accents, Caveat for handwritten notes.
   Every font file is served from this site, because the page's security
   policy allows nothing from anywhere else. */
@font-face{font-family:"Figtree";font-weight:300 900;font-display:swap;
  src:url("fonts/figtree.woff2") format("woff2")}
@font-face{font-family:"Bodoni Moda";font-weight:400 900;font-display:swap;
  src:url("fonts/bodoni-moda.woff2") format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;
  src:url("fonts/bodoni-moda-italic.woff2") format("woff2")}
@font-face{font-family:"Caveat";font-weight:400 700;font-display:swap;
  src:url("fonts/caveat.woff2") format("woff2")}

:root{
  --plum:#2A1838; --plum-2:#3A2549; --cream:#FFF4EC; --blush:#F7C8B4;
  --magenta:#D6336C; --magenta-dark:#B5235A; --orange:#FF8A3D; --orange-ink:#E0681D;
  --teal:#1F7A7A; --ink:#2A1838; --soft:#5B4A66; --quiet:#8A7A92;
  --line:rgba(42,24,56,.08); --error:#B5235A;
  --display:"Figtree","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --sans:"Figtree",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --hand:"Caveat","Bradley Hand",cursive;
  --gutter:clamp(1rem,5vw,2rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--teal)}

/* ---- plain pages (steps two and three, done, error, waiting list) */
main.page,footer{max-width:36rem;margin:0 auto;padding-inline:var(--gutter)}
main.page{padding-block:clamp(2rem,7vw,4.5rem) 0}
h1{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2rem,6vw,2.7rem);line-height:1.08;margin:0 0 1.2rem}
h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:1.4rem;
  line-height:1.2;margin:0 0 .4rem}
.meta{font-size:.78rem;color:var(--quiet);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .5rem}
.opening{font-size:clamp(1.1rem,3.4vw,1.3rem);line-height:1.5;color:var(--soft)}
.lede,.hint{color:var(--soft);font-size:.92rem}
.hint{margin:.35rem 0 0}
.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:1.6rem;margin:2rem 0}

/* ---- forms */
label{display:block;font-weight:600;font-size:.95rem;margin:1.1rem 0 .35rem}
input[type=text],input:not([type]),input[type=email],input[type=date],input[type=time],select{
  width:100%;font:inherit;padding:.7rem .8rem;border:1px solid rgba(42,24,56,.18);border-radius:12px;
  background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--magenta);outline-offset:1px}
select{margin-top:.1rem}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.92rem}
.check input{margin-top:.35rem;accent-color:var(--magenta)}
fieldset{border:1px solid var(--line);border-radius:16px;margin:1.1rem 0;padding:.6rem 1rem}
legend{font-weight:600;font-size:.95rem;padding:0 .3rem}
button{margin-top:1.5rem;width:100%;font:inherit;font-weight:700;color:#fff;background:var(--magenta);
  border:0;border-radius:999px;padding:.95rem 1rem;cursor:pointer;transition:background .15s ease}
button:hover{background:var(--magenta-dark)}
.error{color:var(--error);font-size:.9rem;margin:.35rem 0 0;font-weight:600}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.picker{position:relative}
#place_list{position:absolute;z-index:5;left:0;right:0;margin:.2rem 0 0;padding:.3rem 0;list-style:none;
  background:#fff;border:1px solid rgba(42,24,56,.18);border-radius:12px;
  box-shadow:0 10px 26px rgba(42,24,56,.12)}
#place_list li{padding:.5rem .75rem;cursor:pointer;font-size:.95rem}
#place_list li[aria-selected=true],#place_list li:hover{background:var(--blush)}
.questions{margin-top:1.2rem}
.step{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--magenta);margin:0 0 .6rem}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
main.page .card{margin-top:1.5rem}

footer{margin-top:3rem;padding-block:1.2rem 2.2rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--quiet)}
footer a{color:var(--quiet)}
.test-banner{position:sticky;top:0;z-index:10;margin:0;padding:.5rem var(--gutter);text-align:center;
  background:var(--orange);color:#fff;font-size:.85rem;font-weight:700}

/* ---- landing page */
.landing .wrap{max-width:68rem;margin:0 auto;padding-inline:var(--gutter)}
.landing .wrap.narrow{max-width:44rem}
.landing .center{text-align:center}
.band{padding-block:clamp(3.5rem,9vw,6rem)}
.kicker{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--magenta);margin:0 0 .9rem}
.big{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.8rem,4.6vw,2.6rem);line-height:1.1;margin:0 0 1.3rem}
.strong{font-weight:600}
.accent{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--magenta)}
.note{font-family:var(--hand);font-weight:600;font-size:1.35rem;line-height:1.25;color:var(--orange-ink);
  display:inline-flex;align-items:center;gap:.4rem;rotate:-2deg;margin:.2rem 0 0}
.note svg{flex:none;width:2rem;height:1.4rem;stroke:var(--orange);fill:none;stroke-width:1.6}

.cta{display:inline-block;margin-top:.8rem;padding:1rem 2.1rem;border-radius:999px;text-decoration:none;
  font-weight:700;color:#fff;background:var(--magenta);transition:background .15s ease,transform .15s ease}
.cta:hover{background:var(--magenta-dark);transform:translateY(-1px)}
.cta.quiet{background:transparent;color:var(--teal);border:2px solid var(--teal)}
.cta.quiet:hover{background:rgba(31,122,122,.08);color:var(--teal)}

/* hero */
.hero{position:relative;overflow:hidden;color:#FDF2EA;
  padding-block:clamp(2.5rem,6vw,4rem) clamp(3.5rem,9vw,5.5rem);
  background:
    radial-gradient(ellipse at 50% 115%,rgba(214,51,108,.5),transparent 62%),
    radial-gradient(ellipse at 88% -10%,rgba(255,138,61,.3),transparent 55%),
    linear-gradient(180deg,var(--plum),var(--plum-2))}
.hero .wrap{position:relative;max-width:68rem}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);
  align-items:start;text-align:left}
.hero-copy{padding-top:clamp(0rem,3vw,2.2rem)}
.hero-form .card{margin:0;color:var(--ink);border:0;border-radius:24px;
  padding:clamp(1.3rem,3vw,2rem);box-shadow:0 26px 60px rgba(14,6,20,.4)}
.hero-form .card h2{font-size:1.6rem}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;text-align:center}
  .hero .sub{margin-inline:auto}.note{justify-content:center}}
.hero h1{font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(2.3rem,5.6vw,3.7rem);line-height:1.02;margin:0 0 1.2rem;color:#fff}
.hero h1 em,.hero h1 .accent{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blush)}
.hero .sub{font-size:clamp(1.05rem,2.6vw,1.25rem);line-height:1.5;margin:0 0 1.2rem;max-width:34rem;
  color:#EBD8E2}
.hero .small{font-size:.85rem;color:#C4AEBE;margin:1rem 0 0}
.hero .note{color:var(--orange)}
.hero .note svg{stroke:var(--orange)}
.pill{display:inline-block;margin:0 0 1.6rem;padding:.4rem 1.1rem;border:1px solid rgba(247,200,180,.45);
  border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blush);background:rgba(247,200,180,.1)}
.wheel{position:absolute;width:min(46rem,130vw);left:50%;top:50%;translate:-50% -50%;
  fill:none;stroke:rgba(247,200,180,.14);stroke-width:.5;animation:turn 240s linear infinite}
.wheel .tri{stroke:rgba(214,51,108,.3)}
@keyframes turn{to{rotate:360deg}}

/* story */
.hl{background:linear-gradient(transparent 58%,var(--blush) 58%);padding:0 .08em}
.hero .hl{background:linear-gradient(transparent 58%,rgba(214,51,108,.45) 58%)}
.story p{font-size:1.05rem}
blockquote{margin:2.2rem 0;padding:1.3rem 1.6rem;border-left:4px solid var(--magenta);background:#fff;
  border-radius:0 24px 24px 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.4rem,3.6vw,1.9rem);line-height:1.25;color:var(--ink)}

/* about */
.about{background:var(--blush)}
.about-grid{display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:2.2rem;align-items:start}
.about .wrap.narrow.about-grid{max-width:58rem}
.about .kicker{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:1.9rem;
  text-transform:none;color:var(--plum)}
.about p{color:#4A3355}
.chips{list-style:none;padding:0;margin:1rem 0 1.4rem;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{padding:.35rem .9rem;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:.8rem;font-weight:600;color:var(--magenta-dark)}
.press{font-size:.85rem;color:#6B4F62;margin:1.2rem 0 0}
@media (max-width:700px){.about-grid{grid-template-columns:1fr}.portrait{max-width:17rem}}

/* steps */
.steps{list-style:none;padding:0;margin:2.6rem 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem}
.steps li{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:2.2rem 1.5rem 1.5rem}
.steps h3,.cards h3{font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:1.2rem;line-height:1.25;margin:0 0 .5rem}
.steps p,.cards p{margin:0;color:var(--soft);font-size:.96rem}
.num{position:absolute;top:-1.1rem;left:1.5rem;width:2.2rem;height:2.2rem;border-radius:50%;
  display:grid;place-items:center;font-weight:700;color:#fff;background:var(--magenta)}

/* what is inside */
.inside{background:linear-gradient(180deg,var(--cream),#FDE8DC)}
.cards{margin-top:2.6rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:1.2rem;max-width:56rem;margin-inline:auto}
.cards article{background:#fff;border:1px solid var(--line);border-radius:24px;padding:1.6rem;
  transition:transform .15s ease}
.cards article:hover{transform:translateY(-3px)}
.cards article.wide{grid-column:1/-1;background:var(--plum);border:0;color:#FDF2EA}
.cards article.wide p{color:#D6C2CE}
.glyph{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;margin-bottom:.8rem;
  border-radius:14px;font-size:1.15rem;color:var(--magenta-dark);background:var(--blush)}
.wide .glyph{background:rgba(247,200,180,.18);color:var(--blush)}

/* what becomes possible */
.possible{color:#FDF2EA;background:
  radial-gradient(ellipse at 0% 0%,rgba(214,51,108,.38),transparent 52%),
  radial-gradient(ellipse at 100% 100%,rgba(255,138,61,.2),transparent 52%),
  var(--plum)}
.possible .kicker{color:var(--blush)}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding:0 0 0 2.4rem;margin:0 0 1.2rem;color:var(--ink)}
.possible .ticks li{color:#E6D4DE}
.ticks li::before{content:"✓";position:absolute;left:0;top:.1rem;width:1.6rem;height:1.6rem;
  border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:700;
  color:#fff;background:var(--magenta)}
.closer{margin:2.2rem 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.35rem,3.4vw,1.8rem);line-height:1.3;color:var(--plum)}
.possible .closer{color:#fff}

/* waiting, the form and the questions people ask */
.waiting p{font-size:1.05rem}
.get{background:var(--blush)}
.get .card{margin:0;border-radius:28px;padding:clamp(1.3rem,4vw,2.2rem);
  box-shadow:0 20px 44px rgba(42,24,56,.12)}
.get .card h2{font-size:1.7rem}
.fine{margin:1.2rem 0 0;font-size:.85rem;color:#6B4F62;text-align:center}
.faq details{border-bottom:1px solid var(--line);padding:.9rem 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;position:relative;padding-right:2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:-.2rem;font-size:1.5rem;
  color:var(--magenta);transition:rotate .15s ease}
.faq details[open] summary::after{rotate:45deg}
.faq details p{margin:.5rem 0 0;color:var(--soft)}
.disclaimer{margin-top:2.5rem;font-size:.78rem}

/* photos */
.portrait,.story-photo{display:block}
.portrait img,.story-photo img{display:block;width:100%;height:auto;max-width:100%}
.portrait img{border-radius:24px;aspect-ratio:4/5;object-fit:cover;
  box-shadow:0 18px 40px rgba(42,24,56,.18)}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);
  gap:clamp(2rem,5vw,4rem);align-items:start;max-width:62rem}
.story-photo{position:sticky;top:2rem}
.story-photo img{border-radius:24px;aspect-ratio:3/4;object-fit:cover;
  box-shadow:0 18px 40px rgba(42,24,56,.14)}
@media (max-width:820px){
  .story-grid{grid-template-columns:1fr}
  .story-photo{position:static;max-width:20rem;margin-inline:auto;order:-1}
}

/* the privacy page */
main.page h2{margin:2.2rem 0 .6rem;font-size:1.3rem}
main.page h3{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:1.6rem 0 .4rem}
main.page p{color:var(--soft)}
.plain{list-style:none;padding:0;margin:1rem 0}
.plain li{padding:0 0 .9rem;color:var(--soft)}
.plain strong{color:var(--ink)}

/* the eyebrow above the fold, naming the outcome */
.eyebrow{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--magenta);margin:0 0 1rem;font-weight:600;line-height:1.7;
}

/* testimonials */
.band.proof{background:var(--cream)}
.quotes{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:2rem 0 1.25rem}
.quotes figure{margin:0;background:#fff;border-radius:24px;padding:1.6rem 1.5rem;border:1px solid rgba(42,24,56,.08)}
.quotes blockquote{margin:0 0 .9rem;font-size:1rem;line-height:1.7;color:var(--plum)}
.quotes blockquote::before{content:"\201C"}
.quotes blockquote::after{content:"\201D"}
.quotes figcaption{font-size:.86rem;color:var(--soft);font-weight:600}

/* who it is for, and who it is not */
.fit-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:2.4rem;max-width:58rem;margin-inline:auto}
.fit-grid li:last-child{margin-bottom:0}
.ticks.plain li::before{content:"\2022";color:#fff}
/* a .plain li rule elsewhere zeroes the left padding, which slid the marker
   onto the text; and .ticks li is coloured for the dark bands, so the fit
   band needs its own ink. */
.ticks.plain li{padding:0 0 0 2.4rem;margin:0 0 1.2rem}
.ticks.plain li{color:var(--soft)}

/* the four architectures */
.band.method .ticks li strong{color:var(--plum)}

/* the one-line lede under a section heading */
.band-lede{max-width:46rem;margin:1.2rem auto 0;color:var(--soft)}

/* the four dimensions on the cards */
.dim{margin:0 0 .35rem;font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--magenta-dark)}
.cards.dims h3{font-size:1.08rem;margin-bottom:.8rem}
.cards.dims ul{list-style:none;padding:0;margin:0}
.cards.dims li{position:relative;padding-left:1rem;margin-bottom:.65rem;
  color:var(--soft);font-size:.96rem}
.cards.dims li:last-child{margin-bottom:0}
.cards.dims li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--blush)}
.cards.dims .wide h3{margin-bottom:.5rem}
