/* Variant B, creators (2026-10-27 redesign: "sentence as layout"). A never loads this file.
   Keeps the LP-5 brand: system font (var(--lp5-display)), gold / navy / white / grey only, 3px gold buttons,
   var(--lp5-margin) gutters. Five type steps: display, heading, lead, body, small. Surfaces are separated by
   flat fields and tone steps; no rules, gradients or resting shadows outside real interface fragments (data-ui). */
.cr-main{
  --cr-ink:#0D1B2B;--cr-muted:#4B5565;--cr-ground:#FFFFFF;--cr-grey:#E7E8EB;--cr-grey-2:#F1F2F4;
  --cr-navy:#0C1A2C;--cr-navy-2:#16294A;--cr-on:#F4F5F7;--cr-on-soft:#C3CBD8;
  --cr-gold:#E8BA4D;--cr-gold-ink:#172234;--cr-gold-deep:#8A5A00;
  --cr-display:clamp(42px,8.4vw,136px);--cr-h:clamp(30px,3.6vw,56px);--cr-lead:clamp(18px,1.35vw,21px);--cr-body:17px;--cr-small:14px;
  --cr-space:clamp(96px,11vw,184px);--cr-ease:cubic-bezier(.23,1,.32,1);
  background:var(--cr-ground);color:var(--cr-ink)
}
body:has(.cr-main){background:#FFFFFF}
.cr-header .lp5-bar{max-width:none}
.cr-header .lp5-btn--sm{font-size:13px}
.cr-wrap{width:min(100% - 2*var(--lp5-margin),1440px);margin-inline:auto}
.cr-main [hidden]{display:none!important}
.cr-keep{white-space:nowrap}
.cr-main ::selection{background:var(--cr-gold);color:var(--cr-gold-ink)}
.cr-main :where(p,h1,h2,h3,dl,dd,ul,ol,blockquote,figure){margin:0}
.cr-main :focus-visible{outline:3px solid var(--cr-gold-deep);outline-offset:3px}
.cr-link{display:inline-flex;align-items:center;min-height:44px;font:750 var(--cr-body)/1.3 var(--lp5-display);color:inherit;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px;text-decoration-color:var(--cr-gold);transition:text-underline-offset 200ms var(--cr-ease)}
@media (hover:hover) and (pointer:fine){.cr-link:hover{text-underline-offset:4px}}
.cr-note{font-size:var(--cr-small);line-height:1.5;color:var(--cr-muted)}
.cr-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---- Hero: the craft sits inside the sentence ---- */
.cr-hero{display:flex;align-items:center;min-height:calc(100svh - var(--lp5-header));padding:clamp(48px,8vh,112px) 0 clamp(40px,6vh,72px)}
.cr-sentence{font:850 var(--cr-display)/.96 var(--lp5-display);letter-spacing:-.045em;color:var(--cr-ink)}
.cr-line{display:inline-block;white-space:nowrap}
.cr-line + .cr-frame + .cr-line,.cr-frame + .cr-line{display:block}
.cr-frame{position:relative;display:inline-block;width:2.15em;height:.73em;margin-left:.1em;vertical-align:baseline;overflow:hidden;border-radius:.06em;background:var(--cr-grey)}
.cr-reel{position:absolute;inset:0;display:flex;flex-direction:column;transform:translateY(calc(var(--i,0) * -100%));transition:transform 900ms var(--cr-ease)}
.cr-reel.is-resetting{transition:none}
.cr-reel img{flex:0 0 100%;width:100%;height:100%;object-fit:cover}
.cr-reel img[data-reel-craft="music"]{object-position:center 40%}
.cr-reel img[data-reel-craft="design"]{object-position:center 30%}
.cr-hero-foot{display:grid;gap:28px 48px;margin-top:clamp(40px,7vh,80px);align-items:end}
.cr-lead{font-size:var(--cr-lead);line-height:1.5;max-width:44ch}
.cr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.cr-hero-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:28px;font-size:var(--cr-small);color:var(--cr-muted)}
.cr-reel-toggle{min-height:44px;padding:0;border:0;background:none;font:650 var(--cr-small)/1 var(--lp5-display);color:var(--cr-ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@media (min-width:1024px){.cr-hero-foot{grid-template-columns:minmax(0,1fr) auto}}

/* ---- The live example: "I make … and want to …" ---- */
.cr-agent{background:var(--cr-grey);padding:var(--cr-space) 0}
.cr-ask-line{font:800 var(--cr-h)/1.16 var(--lp5-display);letter-spacing:-.035em;max-width:24ch}
.cr-ask-line label{cursor:pointer}
.cr-pick{position:relative;display:inline-block;max-width:100%}
.cr-pick select{appearance:none;-webkit-appearance:none;field-sizing:content;max-width:100%;margin:0;padding:0 .78em .02em .04em;border:0;border-bottom:.075em solid var(--cr-gold-deep);border-radius:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;transition:background-color 200ms ease}
.cr-pick::after{content:"";position:absolute;right:.2em;top:52%;width:.2em;height:.2em;border-right:.055em solid currentColor;border-bottom:.055em solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
@media (hover:hover) and (pointer:fine){.cr-pick select:hover{background-color:#DADCE1}}
.cr-ask-go{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;padding:0 18px;border:0;border-radius:var(--lp5-radius);background:var(--cr-ink);color:#FFFFFF;font:750 15px/1 var(--lp5-display);cursor:pointer}
.cr-answer{display:grid;gap:40px;margin-top:clamp(40px,6vh,64px);align-items:start}
@media (min-width:1024px){.cr-answer{grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:clamp(48px,6vw,112px)}}
.cr-answer-side{display:grid;gap:20px;max-width:46ch}
.cr-craft-photo{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:4px;background:#DADCE1}
.cr-answer-lead{font-size:var(--cr-lead);line-height:1.5}
.cr-tries{font-size:var(--cr-body);line-height:1.7}
.cr-tries span{color:var(--cr-muted)}
.cr-tries a{color:var(--cr-ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--cr-gold-deep);text-underline-offset:4px}

/* Interface fragments (data-ui): the product's own card language. */
.cr-card,.cr-frag{background:#FFFFFF;color:var(--cr-ink);border-radius:8px;padding:clamp(20px,2.2vw,30px);display:grid;gap:14px;font-size:15px;line-height:1.45}
.cr-card{transition:opacity 220ms ease}
.cr-card.is-updating{opacity:.45}
.cr-card-k{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-weight:650;font-size:14px;color:var(--cr-muted)}
.cr-card-k b{color:var(--cr-ink);font-weight:800}
.cr-tag{margin-left:auto;padding:2px 8px;border-radius:3px;background:#FFF4D2;color:#68470D;font-weight:800;font-size:13px}
.cr-live{flex:none;width:10px;height:10px;border-radius:50%;background:var(--cr-gold)}
.cr-card-label{font-weight:800;font-size:13px;color:#6E4A0E}
.cr-card-fit{font:800 clamp(21px,1.8vw,26px)/1.2 var(--lp5-display);letter-spacing:-.02em;margin-top:-8px}
.cr-card-kind{margin-top:-8px;color:var(--cr-muted);font-size:14px}
.cr-why{list-style:none;padding:0;display:grid;gap:8px}
.cr-why li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:baseline}
.cr-why-k{font-weight:800;font-size:13px;color:var(--cr-ink)}
.cr-why .is-inferred .cr-why-k{color:#6E4A0E}
.cr-why .is-inferred span:last-child{font-style:italic}
.cr-draft{display:grid;gap:8px;padding:16px 18px;border-radius:6px;background:var(--cr-grey-2)}
.cr-draft blockquote,.cr-frag-draft{font-size:15px;line-height:1.55;color:#33405A}
.cr-card-actions{display:flex;flex-wrap:wrap;gap:8px}
.cr-card-actions span{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:3px;background:var(--cr-grey-2);font-weight:750;font-size:14px;color:var(--cr-ink)}
.cr-card-actions .is-primary{background:var(--cr-gold);color:var(--cr-gold-ink)}

/* ---- How it works: one stage at a time, driven by a slider ---- */
.cr-stages{list-style:none;padding:0}
.cr-stage{display:grid}
.cr-stage[hidden]{display:none}
.cr-stage-copy{background:var(--cr-navy);color:var(--cr-on);padding:clamp(56px,8vw,120px) var(--lp5-margin);display:grid;align-content:start;gap:20px}
.cr-clause{font:850 var(--cr-h)/1.02 var(--lp5-display);letter-spacing:-.04em;max-width:15ch}
.cr-stage-copy p{font-size:var(--cr-lead);line-height:1.5;max-width:38ch;color:var(--cr-on)}
.cr-stage-ui{position:relative;overflow:hidden;background:var(--cr-grey-2);display:grid;place-items:center;padding:clamp(40px,6vw,96px) var(--lp5-margin)}
.cr-stage-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cr-stage-ui .cr-frag{position:relative;z-index:1}
.cr-frag{width:min(100%,440px);box-shadow:0 24px 48px -28px rgba(13,27,43,.35)} /* taste-skill-ignore: data-ui interface fragment floating on a photograph */
.cr-prof{display:flex;align-items:center;gap:12px}
.cr-prof b{display:block;font-size:16px}
.cr-prof small{display:block;font-size:13px;color:var(--cr-muted)}
.cr-disc{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--cr-navy);color:var(--cr-gold);font-weight:850}
.cr-tabs{display:flex;gap:18px;font-weight:700;font-size:13px;color:var(--cr-muted)}
.cr-tabs .is-on{color:var(--cr-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:#A16F18}
.cr-items{list-style:none;padding:0;display:grid;gap:8px}
.cr-items li{display:grid;gap:2px;padding:10px 12px;border-radius:6px;background:var(--cr-grey-2)}
.cr-items small{font-size:13px;color:var(--cr-muted)}
.cr-field-k{font-weight:800;font-size:13px;color:var(--cr-muted);margin-bottom:-6px}
.cr-field{padding:12px 14px;border-radius:6px;background:var(--cr-grey-2);font-weight:700}
.cr-field--text{font-weight:500;min-height:4.5em}
.cr-toggle{display:flex;align-items:center;gap:10px;font-size:14px}
.cr-switch{position:relative;width:36px;height:20px;flex:none;border-radius:999px;background:var(--cr-navy)}
.cr-switch::after{content:"";position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:var(--cr-gold)}
.cr-log{list-style:none;padding:0;display:grid;gap:12px}
.cr-log li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font-weight:700}
.cr-log small{display:block;margin-top:2px;font-weight:500;font-size:14px;color:var(--cr-muted)}
.cr-ic{width:28px;height:28px;padding:5px;border-radius:50%;background:#FFF4D2;color:#68470D;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cr-scrub{background:var(--cr-navy);color:var(--cr-on);padding:0 var(--lp5-margin) 40px}
.cr-scrub input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.cr-scrub input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:0;background:#2C3F5C}
.cr-scrub input[type=range]::-moz-range-track{height:8px;border-radius:0;background:#2C3F5C}
.cr-scrub input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:-12px;border:0;border-radius:2px;background:var(--cr-gold)}
.cr-scrub input[type=range]::-moz-range-thumb{width:32px;height:32px;border:0;border-radius:2px;background:var(--cr-gold)}
.cr-scrub-names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.cr-scrub-names button{min-height:44px;padding:0;border:0;background:none;text-align:left;font:700 15px/1.2 var(--lp5-display);color:var(--cr-on-soft);cursor:pointer}
.cr-scrub-names button[aria-pressed="true"]{color:var(--cr-on)}
@media (hover:hover) and (pointer:fine){.cr-scrub-names button:hover{color:var(--cr-on)}}
.cr-stage.is-entering .cr-stage-copy > *,.cr-stage.is-entering .cr-frag{animation:cr-swap 260ms var(--cr-ease) both}
@keyframes cr-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (min-width:1024px){
  .cr-stage{grid-template-columns:1fr 1fr}
  .cr-stage + .cr-stage{margin-top:0}
  .cr-js .cr-how{position:relative}
  .cr-js .cr-stage{min-height:min(86svh,780px)}
  .cr-js .cr-stage-copy{padding-bottom:180px}
  .cr-js .cr-scrub{position:absolute;left:0;bottom:0;width:50%;background:transparent;padding:0 var(--lp5-margin) clamp(32px,5vh,52px)}
  .cr-scrub-names{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---- Profile and Communities: a paragraph with picture words ---- */
.cr-para-sec{padding:var(--cr-space) 0}
.cr-para{font:750 clamp(24px,2.5vw,36px)/1.32 var(--lp5-display);letter-spacing:-.02em;max-width:34em}
.cr-slot{display:inline-block;width:1.9em;height:1em;margin:0 .1em;vertical-align:-.16em;border-radius:.14em;object-fit:cover;background:var(--cr-grey)}
.cr-para-foot{display:grid;gap:16px;margin-top:56px;max-width:46ch}
.cr-para-foot p{font-size:var(--cr-lead);line-height:1.5}
@media (min-width:1024px){.cr-para-foot{margin-left:50%}}

/* ---- Pricing: one sentence, then every plan as a row ---- */
.cr-price{background:var(--cr-navy);color:var(--cr-on);padding:var(--cr-space) 0}
.cr-price-line{font:850 clamp(30px,7.6vw,121px)/1 var(--lp5-display);letter-spacing:-.045em}
.cr-price-block{display:inline-block;padding:0 .14em;border-radius:.04em;background:var(--cr-gold);color:var(--cr-gold-ink);line-height:1.02}
.cr-price-foot{display:grid;gap:28px;margin:clamp(40px,6vh,64px) 0 40px;align-items:end}
.cr-price-foot p{font-size:var(--cr-lead);line-height:1.5;max-width:46ch}
@media (min-width:1024px){.cr-price-foot{grid-template-columns:minmax(0,1fr) auto}}
.cr-billing{display:inline-flex;flex-wrap:wrap;gap:4px;margin:0;padding:4px;border:0;border-radius:5px;background:var(--cr-navy-2);min-inline-size:0;justify-self:start}
.cr-billing input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.cr-billing label{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:3px;font:750 15px/1.2 var(--lp5-display);color:var(--cr-on-soft);cursor:pointer}
.cr-billing input:checked + label{background:var(--cr-gold);color:var(--cr-gold-ink)}
.cr-billing input:focus-visible + label{outline:3px solid var(--cr-gold);outline-offset:2px}
.cr-plans [data-bill="y"],.cr-plans:has([data-bill-annual]:checked) [data-bill="m"]{display:none}
.cr-plans:has([data-bill-annual]:checked) [data-bill="y"]{display:inline}
.cr-tiers{list-style:none;padding:0;display:grid;gap:6px}
.cr-tier{display:grid;gap:10px 28px;padding:24px clamp(20px,2.4vw,32px);background:var(--cr-navy-2);align-items:center}
.cr-tier.is-popular{background:#1E3354}
.cr-tier h3{font:800 26px/1.15 var(--lp5-display);letter-spacing:-.02em}
.cr-tier-price{font:850 26px/1.15 var(--lp5-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cr-unit{font-weight:600;letter-spacing:0;color:var(--cr-on-soft)}
.cr-tier-sum{font-size:var(--cr-body);line-height:1.5;color:var(--cr-on)}
.cr-tier .lp5-btn{width:100%}
.cr-btn-line{background:transparent;color:var(--cr-on);box-shadow:inset 0 0 0 2px var(--cr-on)} /* taste-skill-ignore: 2px inset outline is the outline button border */
@media (hover:hover) and (pointer:fine){.cr-btn-line:hover{background:var(--cr-on);color:var(--cr-ink)}}
@media (min-width:1024px){.cr-tier{grid-template-columns:minmax(150px,2fr) minmax(160px,2fr) minmax(0,5fr) minmax(190px,2fr)}}
.cr-price-note{margin-top:28px;font-size:var(--cr-small);line-height:1.5;color:var(--cr-on-soft)}

/* ---- Questions: large questions, answers beside, all open ---- */
.cr-faq{padding:var(--cr-space) 0}
.cr-faq-h{font:800 clamp(26px,2.5vw,36px)/1.12 var(--lp5-display);letter-spacing:-.025em;color:var(--cr-muted);margin-bottom:56px}
.cr-qa{display:grid;gap:64px}
.cr-qa > div{display:grid;gap:12px}
.cr-qa dt{font:800 clamp(24px,2.5vw,36px)/1.12 var(--lp5-display);letter-spacing:-.025em;max-width:20ch}
.cr-qa dd{margin:0;font-size:var(--cr-body);line-height:1.55;max-width:44ch}
@media (min-width:1024px){
  .cr-faq-h{width:50%}
  .cr-qa{gap:80px}
  .cr-qa > div{grid-template-columns:minmax(0,1fr) minmax(0,.84fr);gap:0 clamp(48px,8vw,140px);align-items:start}
  .cr-qa dd{padding-top:.5em}
}

/* ---- Close: the opening idea again, inverted ---- */
.cr-close{display:flex;align-items:stretch;min-height:88svh;background:var(--cr-navy);color:var(--cr-on)}
.cr-close .cr-wrap{display:flex;flex-direction:column;justify-content:space-between;gap:64px;padding:var(--cr-space) 0 clamp(40px,6vh,64px)}
.cr-close-line{font:850 clamp(38px,10vw,121px)/.92 var(--lp5-display);letter-spacing:-.05em}
.cr-close-foot{display:grid;gap:24px;align-items:end}
.cr-close-foot p{font-size:var(--cr-lead);line-height:1.5;max-width:42ch}
.cr-close-act{display:grid;gap:12px;justify-items:start}
.cr-close .cr-note{color:var(--cr-on-soft)}
.cr-close a:focus-visible{outline-color:var(--cr-gold)}
@media (min-width:1024px){.cr-close-foot{grid-template-columns:minmax(0,1fr) auto}.cr-close-act{justify-items:end}}

/* ---- Footer ---- */
.cr-footer{padding:48px 0 56px;background:var(--cr-ground,#FFFFFF);color:#0D1B2B}
.cr-footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.cr-footer nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.cr-footer nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:650;font-size:15px;color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){.cr-footer nav a:hover{text-decoration:underline;text-underline-offset:4px}}
.cr-credits{margin-top:20px;font-size:var(--cr-small,14px);color:#4B5565}
.cr-credits summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:650}
.cr-credits p,.cr-credits ul{margin:8px 0 0;max-width:80ch;line-height:1.6}
.cr-credits a{color:inherit}

/* ---- Entrances: content is visible unless the script opts in, and it never hides above-the-fold copy ---- */
.cr-motion [data-enter]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--cr-ease),transform 800ms var(--cr-ease);transition-delay:var(--cr-d,0ms)}
.cr-motion [data-enter].is-in{opacity:1;transform:none}

/* ---- Phone composition ---- */
@media (max-width:1023px){
  .cr-hero{min-height:0}
  .cr-scrub-names{padding-top:4px}
}
@media (max-width:639px){
  .cr-sentence{font-size:clamp(34px,9.4vw,60px)}
  .cr-line{display:block}
  .cr-frame{display:block;width:100%;height:auto;aspect-ratio:16/10;margin:.16em 0 .12em;border-radius:6px}
  .cr-actions{flex-direction:column;align-items:flex-start}
  .cr-why li{grid-template-columns:64px minmax(0,1fr)}
  .cr-qa{gap:48px}
  .cr-close{min-height:0}
  .cr-close .cr-wrap{gap:48px}
}
@media (prefers-reduced-motion:reduce){
  .cr-reel,.cr-card,.cr-link{transition:none}
  .cr-stage.is-entering .cr-stage-copy > *,.cr-stage.is-entering .cr-frag{animation:none}
  .cr-motion [data-enter]{opacity:1;transform:none;transition:none}
}
.cr-tier-sum b{color:var(--cr-gold);font-weight:800}
@media (max-width:1023px){.cr-tiers{gap:40px}.cr-tier{padding-block:28px 32px}}
.cr-plans:has([data-bill-annual]:checked) a[data-bill="y"]{display:inline-flex}