/* Fictional checkout for KIN 01. One screen that fits the window at any size: everything is in rem, and the root size follows
   the window (height first, so a short window shrinks the whole page instead of scrolling it). Below 880px wide the stage sits
   on top of the form and only the form scrolls, inside its own box. Same type and bronze hardware as the rest of the site. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  color-scheme:dark;
  --paper:#211e1b;--ink:#f1ede6;--muted:#a89f92;--soft:#beb5a8;--amber:#ffc46b;--bronze:#c39a7c;--bronze-hi:#ead0b8;
  --line:rgb(241 237 230 / 12%);--line-bronze:rgb(195 154 124 / 24%);
  --f-display:'Space Grotesk',sans-serif;--f-accent:'Fraunces',Georgia,serif;--f-sans:'Archivo',sans-serif;--f-mono:'Geist Mono',monospace;
  font-size:clamp(9px,min(1.58vh,1.22vw),17px);
}
html,body{height:100%;overflow:hidden;background:var(--paper)}
body{color:var(--ink);font:400 1rem/1.5 var(--f-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
::selection{background:#cfb28a;color:#24231f}

.co{position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh;
  background:radial-gradient(ellipse 86% 91% at 94% 88%,rgba(181,167,147,.2) 0%,rgba(181,167,147,.1) 38%,transparent 78%),
             radial-gradient(ellipse 110% 100% at 100% 100%,rgba(163,151,132,.1) 0%,transparent 80%),var(--paper)}

/* top bar */
.co-top{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem clamp(20px,3.4vw,3.6rem) .5rem}
.co-lockup{position:relative;display:inline-flex;color:var(--ink)}
.co-lockup-svg{display:block;width:5.2rem;height:auto}
.co-lk01{position:absolute;right:-.9em;top:-.15em;font:500 .6rem/1 var(--f-mono);letter-spacing:.06em;color:var(--amber)}
.co-flag{display:flex;align-items:center;gap:.7rem;font:400 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.co-flag span{width:1.1rem;height:2px;background:var(--amber)}
.co-back{font:400 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);transition:color 200ms}
.co-back:hover{color:var(--amber)}

/* layout */
.co-main{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);min-height:0}
.co-stage{position:relative;display:flex;flex-direction:column;min-height:0;padding:0 2rem 1.6rem clamp(20px,3.4vw,3.6rem)}
.co-panel{position:relative;min-height:0;border-left:1px solid var(--line);background:rgb(14 12 10 / 18%)}

/* the turnable KIN */
.co-kin{position:relative;flex:1 1 0;min-height:0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline-offset:-4px}
.co-kin.is-dragging{cursor:grabbing}
.co-poster,.co-kin canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;pointer-events:none}
.co-kin canvas{opacity:0;transition:opacity 240ms ease-out}
.co-kin.is-live canvas{opacity:1}
.co-kin.is-live .co-poster{visibility:hidden}
.co-floor{position:absolute;z-index:0;left:50%;bottom:var(--floor,3%);width:min(62%,38rem);height:3.6rem;translate:-50% 50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgb(0 0 0 / 55%) 0%,rgb(0 0 0 / 30%) 38%,transparent 70%);filter:blur(.5rem)}
.co-stage-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding-top:1rem}
.co-model{display:flex;flex-direction:column;gap:.25rem}
.co-model strong{font:500 1.5rem/1 var(--f-display);letter-spacing:-.02em}
.co-model span{font:400 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.co-drag{display:flex;align-items:center;gap:.8rem;font:400 .8rem/1 var(--f-sans);color:var(--soft)}
.co-drag-arrows{color:var(--amber);letter-spacing:.1em}

/* form column */
.co-form,.co-done{height:100%;min-height:0}
.co-done[hidden],.co-form[hidden]{display:none}
.co-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgb(241 237 230 / 18%) transparent;
  display:flex;flex-direction:column;justify-content:center;gap:.85rem;padding:.6rem clamp(20px,3.4vw,3.6rem) 1rem clamp(20px,3vw,3.2rem)}
.co-eyebrow{display:flex;align-items:center;gap:.7rem;font:400 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.co-eyebrow span{width:1.1rem;height:2px;background:var(--amber)}
.co-head h1,.co-done h2{margin-top:.55rem;font:500 2.25rem/1 var(--f-display);letter-spacing:-.04em}
.co-head h1 em,.co-done h2 em{display:block;font:italic 340 1.08em/1.04 var(--f-accent);font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 1;letter-spacing:-.025em}
.co-sub{margin-top:.55rem;max-width:44ch;color:var(--soft);font-size:.95rem;line-height:1.5}

.co-block{border:0;min-width:0}
.co-block legend{padding:0;margin-bottom:.55rem;font:400 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.co-wide{grid-column:1/-1}
.co-f{display:block;position:relative}
.co-f span{position:absolute;left:.9rem;top:.45rem;font:400 .62rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.co-f input{width:100%;height:2.9rem;padding:1.3rem .9rem .35rem;border:1px solid var(--line);border-radius:.7rem;background:rgb(241 237 230 / 4%);
  font:400 .95rem/1 var(--f-sans);color:var(--ink);cursor:default;caret-color:transparent;text-overflow:ellipsis}
.co-f input:focus-visible{outline-offset:2px}

.co-plan{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:.55rem}
.co-plan button{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;padding:.55rem .9rem;border:1px solid var(--line);border-radius:.7rem;background:transparent;cursor:pointer;text-align:left;
  transition:border-color 200ms,background 200ms}
.co-plan b{font:500 .9rem/1 var(--f-display);letter-spacing:-.01em}
.co-plan span{font:400 .75rem/1 var(--f-sans);color:var(--muted)}
.co-plan button[aria-checked=true]{border-color:var(--bronze);background:rgb(195 154 124 / 9%)}
.co-plan button:hover{border-color:var(--line-bronze)}

/* summary */
.co-sum{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.co-sum>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.38rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.co-sum dt{color:var(--soft)}
.co-sum dt small{display:block;margin-top:.15rem;font:400 .72rem/1.2 var(--f-sans);color:var(--muted)}
.co-sum dd{font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.co-sum .co-due{border-bottom-color:var(--line-bronze)}
.co-sum .co-due dt{color:var(--ink);font:500 1.05rem/1.2 var(--f-display)}
.co-sum .co-due dd{font:500 1.5rem/1 var(--f-display);letter-spacing:-.02em}
.co-sum .co-then{border-bottom:0;padding-top:.45rem;font-size:.82rem}
.co-sum .co-then dd{color:var(--soft)}

/* the button: cream capsule, dark chip, a ring of bronze light turning round it (same hardware as the site's Reserve) */
@property --co-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.co-pay{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;height:3.3rem;padding:0 .35rem 0 1.7rem;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#f7f3ec 0%,#ebe4d8 100%);color:#1d1b18;font:500 1.02rem/1 var(--f-display);letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 80%),inset 0 -1px 0 rgb(0 0 0 / 8%),0 .6rem 1.6rem rgb(0 0 0 / 30%);transition:transform 160ms}
.co-pay:active{transform:scale(.99)}
.co-pay-ring{position:absolute;z-index:-1;inset:-.3rem;border-radius:999px;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--co-a),rgb(195 154 124 / 22%) 0deg,var(--bronze-hi) 26deg,rgb(195 154 124 / 22%) 64deg,rgb(195 154 124 / 22%) 180deg,var(--bronze) 206deg,rgb(195 154 124 / 22%) 244deg,rgb(195 154 124 / 22%) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:co-turn 6s linear infinite}
@keyframes co-turn{to{--co-a:360deg}}
.co-pay-arrow{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;color:var(--ink);
  background:radial-gradient(circle at 35% 28%,#3a3733 0%,#1a1917 62%,#121110 100%);box-shadow:inset 0 1px 0 rgb(255 255 255 / 12%),0 2px 6px rgb(0 0 0 / 35%);transition:transform 400ms cubic-bezier(.23,1,.32,1)}
.co-pay:hover .co-pay-arrow{transform:rotate(45deg)}
.co-pay-link{width:auto;flex:1 1 auto}

/* the notice: always on screen, never fine print */
.co-demo{padding:.65rem .9rem;border:1px solid var(--line-bronze);border-left:2px solid var(--amber);border-radius:.6rem;background:rgb(195 154 124 / 7%);
  color:var(--soft);font-size:.82rem;line-height:1.5}
.co-demo b{font-weight:600;color:var(--ink)}
.co-demo-big{font-size:.95rem}

/* confirmation */
.co-check{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;color:var(--ink);border:1px solid var(--bronze);background:rgb(195 154 124 / 10%)}
.co-receipt{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.co-receipt>div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.co-receipt dt{color:var(--muted)}
.co-receipt dd{font-variant-numeric:tabular-nums}
.co-actions{display:flex;align-items:center;gap:1.2rem}
.co-again{border:0;background:none;cursor:pointer;color:var(--soft);font:400 .92rem/1 var(--f-sans);text-decoration:underline;text-decoration-color:var(--line-bronze);text-underline-offset:.35em}
.co-again:hover{color:var(--amber)}

/* narrower than 880px: the KIN above, the form below, the form scrolling inside its own box */
@media(max-width:880px){
  :root{font-size:clamp(13px,3.9vw,16px)}
  .co-top{flex-wrap:wrap;gap:.5rem 1rem;padding:1rem 20px .25rem}
  .co-flag{order:3;width:100%;font-size:.62rem;letter-spacing:.1em}   /* the notice stays on screen on phones too */
  .co-main{grid-template-columns:1fr;grid-template-rows:minmax(0,34fr) minmax(0,66fr)}
  .co-stage{padding:0 20px .4rem}
  .co-stage-foot{padding-top:.4rem}
  .co-model strong{font-size:1.2rem}
  .co-panel{border-left:0;border-top:1px solid var(--line)}
  .co-scroll{justify-content:flex-start;padding:1.2rem 20px calc(1.4rem + env(safe-area-inset-bottom))}
  .co-head h1,.co-done h2{font-size:2rem}
}
/* wide but short windows: the same layout, just smaller (rem already does it); a very short one gives the form its own scroll */
@media(max-height:420px){.co-sub{display:none}}
@media(prefers-reduced-motion:reduce){.co-pay-ring{animation:none}.co-kin canvas{transition:none}}