@import url("/assets/tokens.css");

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-marketing-ground);color:var(--c-ink-body);font:var(--t-reading);font-family:var(--font-reading)}
a{color:var(--c-primary-ink);text-underline-offset:.2em}
a:hover{color:var(--c-primary)}
button,input,select,textarea{font:var(--t-body-ui)}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--s-md);top:var(--s-md);z-index:100;background:var(--c-canvas);padding:var(--s-sm) var(--s-md);border:1px solid var(--c-primary);border-radius:var(--r-xs)}
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-xl);max-width:1080px;margin:auto;padding:var(--s-md) clamp(var(--s-lg),5vw,var(--s-xxl));border-bottom:1px solid var(--c-hairline)}
.brand{display:inline-flex;align-items:center;gap:var(--s-xs);color:var(--c-ink);font:var(--t-body-ui);font-weight:600;font-size:13px;letter-spacing:2px;text-transform:uppercase;text-decoration:none}
/* The wordmark's mark. One wheel, one size, wherever the brand is set. */
.brand-mark{flex:0 0 auto;display:inline-block;width:22px;height:22px;border-radius:var(--r-pill);vertical-align:middle}

.brand span{color:var(--c-primary)}
.nav-links,.footer-links,.button-row,.feed-actions,.form-row{display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap}
.nav-links a,.footer-links a{color:var(--c-ink-body);font:var(--t-caption);font-weight:600;letter-spacing:1px;text-decoration:none;text-transform:uppercase}
/* 13px uppercase links are ~15px tall. Grow the hit area with a pseudo-element
   so the target clears 44px without changing the header's height or rhythm. */
.nav-links a,.footer-links a,.site-header nav a,.text-cta{position:relative}
.nav-links a::after,.footer-links a::after,.site-header nav a::after,.text-cta::after{content:"";position:absolute;inset:-15px -8px}
.nav-links a[aria-current="page"]{color:var(--c-primary-ink)}
.hero,.section,.connect,.policy{max-width:1080px;margin:auto;padding:clamp(var(--s-xxl),9vw,var(--s-section)) clamp(var(--s-lg),5vw,var(--s-xxl))}
.hero{min-height:72vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.eyebrow,.section-label{margin:0 0 var(--s-md);color:var(--c-primary-ink);font:var(--t-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.hero h1,.connect h1,.policy h1{margin:0 0 var(--s-lg);color:var(--c-ink);font-family:var(--font-display);font-weight:500;font-size:clamp(48px,8vw,72px);line-height:.98;letter-spacing:var(--ls-display-xl);text-wrap:balance}
.hero h1 em{color:var(--c-primary-ink);font-weight:400}
.deck{max-width:29ch;margin:var(--s-lg) 0 var(--s-xs);color:var(--c-primary-ink);font-family:var(--font-display);font-size:clamp(23px,3vw,30px);font-style:italic;line-height:1.35}
.body-copy,.connect-note,.policy p,.policy li{max-width:65ch}
.body-copy{margin:var(--s-xs) 0 var(--s-lg);font:var(--t-reading-lg);font-family:var(--font-reading);color:var(--c-ink-body)}
.connect-note,.microcopy,.policy-meta{color:var(--c-ink-muted)}
.microcopy{max-width:52rem;margin:var(--s-xs) 0 0;font:var(--t-caption);font-family:var(--font-ui)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 20px;border:1px solid var(--c-hairline-strong);border-radius:var(--r-sm);color:var(--c-ink);background:var(--c-canvas);font:var(--t-button);letter-spacing:var(--ls-button);text-decoration:none;text-transform:uppercase;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease}
.btn-primary{background:var(--c-action);border-color:var(--c-action);color:var(--c-on-action)}
.btn:hover,.btn-primary:hover{background:var(--c-primary-hover);border-color:var(--c-primary-hover);color:var(--c-on-primary)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
/* Burnished CTA — gradient face, darker edge, hairline top highlight, warm cast
   shadow. Declared after the .btn:hover group so the equal-specificity
   .btn-primary:hover above does not flatten the treatment back to a solid fill. */
.btn-primary{
  background:linear-gradient(180deg,#E3BC4A 0%,var(--c-action) 52%,#C0951F 100%);
  border:1px solid var(--c-action-edge);
  box-shadow:inset 0 1px 0 rgba(255,250,229,.62),inset 0 -1px 0 rgba(110,80,10,.20),
             0 1px 1.5px rgba(42,30,18,.13),0 7px 16px -8px rgba(120,88,16,.50);
  text-shadow:0 1px 0 rgba(255,247,222,.34);
  transition:background .14s ease,box-shadow .14s ease,border-color .14s ease}
.btn-primary:hover{
  background:linear-gradient(180deg,#EDC85B 0%,var(--c-action-hover) 52%,#C99E22 100%);
  border-color:#8F6B15;color:var(--c-on-action);
  box-shadow:inset 0 1px 0 rgba(255,252,236,.72),inset 0 -1px 0 rgba(110,80,10,.20),
             0 2px 3px rgba(42,30,18,.14),0 10px 22px -8px rgba(120,88,16,.58)}
.btn-primary:active{
  background:linear-gradient(180deg,#C99E22 0%,#BE931E 100%);
  box-shadow:inset 0 2px 3px rgba(90,64,6,.34)}
/* A gold outline is invisible on a gold fill — the primary button focuses in ink. */
.btn-primary:focus-visible{outline-color:var(--c-ink)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.section{border-top:1px solid var(--c-hairline)}
.section h2,.trust-block h2,.policy h2{margin:0 0 var(--s-md);color:var(--c-ink);font:var(--t-heading-1);letter-spacing:var(--ls-heading-1)}
.section h3,.trust-block h3,.policy h3{color:var(--c-ink);font:var(--t-heading-3)}
.section>p{max-width:65ch}
.steps,.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-md);margin-top:var(--s-xl)}
/* article+article stacking margin is for prose lists; inside a grid it offsets
   every card after the first. */
.steps>article+article,.cards>article+article{margin-top:0}
.step,.card,.trust-block{padding:var(--s-lg);border:1px solid var(--c-hairline);border-radius:var(--r-md);background:var(--c-canvas)}
.step strong{display:block;margin-bottom:var(--s-sm);color:var(--c-primary-ink);font:var(--t-eyebrow);letter-spacing:var(--ls-eyebrow)}
.step h3{margin:0 0 var(--s-xs)}
.step p{margin:0}
.trust-block{max-width:760px;margin:0 0 var(--s-xl)}
.trust-block+ .trust-block{margin-top:var(--s-xl)}
.lilly-words,#answer,.reading-more{padding:var(--s-lg);border-left:3px solid var(--c-primary);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--c-surface-tint);color:var(--c-ink);font:var(--t-reading-lg);font-family:var(--font-reading)}
.feed-actions{margin-top:var(--s-lg)}
.feed-btn{min-width:9rem}
.site-footer{display:flex;justify-content:space-between;gap:var(--s-xl);max-width:1080px;margin:auto;padding:var(--s-xl) clamp(var(--s-lg),5vw,var(--s-xxl));border-top:1.5px solid var(--c-primary);background:var(--c-surface-tint);color:var(--c-ink-muted);font:var(--t-caption);font-family:var(--font-ui)}
.signin-form,.trial-form{display:grid;gap:var(--s-md);max-width:760px;margin:var(--s-xl) 0}
.signin-form label,.trial-field{display:grid;gap:var(--s-xs);color:var(--c-ink);font:var(--t-body-ui);font-weight:600}
.signin-form input,.signin-form select,.signin-form textarea,.trial-field input,.trial-field select,.trial-field textarea,.policy input{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--c-hairline-strong);border-radius:var(--r-xs);background:var(--c-canvas);color:var(--c-ink)}
textarea{resize:vertical}
fieldset{margin:var(--s-sm) 0;padding:var(--s-lg);border:1px solid var(--c-hairline);border-radius:var(--r-md);background:var(--c-surface-tint)}
legend{padding:0 var(--s-xs);color:var(--c-ink);font:var(--t-heading-3)}
label{color:var(--c-ink-body)}
label>input[type="checkbox"]{width:auto;min-height:auto;accent-color:var(--c-primary)}
.form-row>*{flex:1;min-width:180px}
.commitments{max-width:760px;margin:var(--s-xl) 0;padding:0;list-style:none}
.commitments li{position:relative;padding:var(--s-sm) 0 var(--s-sm) var(--s-xl);border-bottom:1px solid var(--c-hairline)}
.commitments li:before{content:'✶';position:absolute;left:var(--s-xxs);color:var(--c-primary)}
.policy{max-width:800px}
.policy section{margin:var(--s-xxl) 0}
.policy code{color:var(--c-ink);background:var(--c-sunken);padding:var(--s-xxs);border-radius:var(--r-xs)}
.todo-copy{min-height:3rem;border:1px dashed var(--c-hairline-strong);padding:var(--s-md);color:var(--c-ink-muted)}
article{color:var(--c-ink-body)}
article+article{margin-top:var(--s-lg)}
#items article,#jobs article{padding:var(--s-lg);border:1px solid var(--c-hairline);border-radius:var(--r-md);background:var(--c-surface-tint)}
.reading-more summary{cursor:pointer;color:var(--c-primary-ink);font:var(--t-body-ui);font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){.site-nav,.site-footer{align-items:flex-start;flex-direction:column}.steps,.cards{grid-template-columns:1fr}.hero{min-height:auto}.nav-links{gap:var(--s-md)}.feed-actions{display:grid;width:100%}.feed-btn,.btn{width:100%}.button-row .btn{width:auto}.form-row{display:grid}.trust-block{padding:var(--s-md)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}