/* Auden Arc — shared form system for audit.audenarc.com + start.audenarc.com.
   Tokens are the live audenarc.com identity (~/Desktop/itsdevmade/src/index.css). Brand-fixed dark on purpose. */
@font-face{font-family:'Archivo';src:url('/fonts/archivo-800.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/fonts/public-sans-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/fonts/public-sans-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/fonts/public-sans-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-500.ttf') format('truetype');font-weight:500;font-display:swap}

:root{
  --obsidian:#0b1020; --ink:#121a30; --ivory:#f2efe8; --violet:#7167ff; --azure:#3fa9ff; --mist:#9aa4b5; --alert:#f2a08f;
  /* text: ivory at three strengths. 36% is placeholder-only. */
  --t1:var(--ivory); --t2:color-mix(in srgb,var(--ivory) 82%,transparent); --t3:color-mix(in srgb,var(--ivory) 64%,transparent);
  --t4:color-mix(in srgb,var(--ivory) 42%,transparent);
  /* hairlines: the only structure on the page */
  --line:color-mix(in srgb,var(--ivory) 12%,transparent); --line-2:color-mix(in srgb,var(--ivory) 22%,transparent);
  --field:color-mix(in srgb,var(--ivory) 4%,var(--obsidian)); --field-hover:color-mix(in srgb,var(--ivory) 7%,var(--obsidian));
  /* "where you are" accents (step numbers, progress, focus) use a lifted violet; "commit" uses brand violet */
  --here:color-mix(in srgb,var(--violet) 86%,var(--ivory)); --here-18:color-mix(in srgb,var(--violet) 22%,transparent);
  --commit:var(--violet); --commit-hover:color-mix(in srgb,var(--violet) 86%,var(--ivory)); --commit-18:color-mix(in srgb,var(--violet) 18%,transparent);
  --r:2px; --rail:242px;
  --font-display:'Archivo','Arial Narrow',sans-serif; --font-body:'Public Sans',Arial,sans-serif; --font-utility:'IBM Plex Mono',ui-monospace,monospace;
  --ease-enter:cubic-bezier(0,0,.2,1); --ease-standard:cubic-bezier(.2,0,0,1); --fast:160ms; --normal:220ms;
  color-scheme:dark;
}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--obsidian);color:var(--t1);font:400 16px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
::selection{background:var(--commit-18)}

/* the site's arc: one thin circle bleeding off the right edge */
.arc{position:fixed;width:1100px;height:1100px;border:1px solid var(--line);border-radius:50%;right:-620px;top:-180px;pointer-events:none;z-index:0}

.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(20px,4.4vw,54px);height:78px;border-bottom:1px solid var(--line)}
.topbar img{height:22px;width:auto;display:block}
.micro{font:500 11px/1.4 var(--font-utility);letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.micro b{color:var(--here);font-weight:500}

.display{font:800 clamp(38px,5vw,68px)/.96 var(--font-display);letter-spacing:-.05em;margin:0;color:var(--t1);text-wrap:balance}
.lede{color:var(--t2);font-size:17px;line-height:1.6;max-width:56ch;margin:20px 0 0}

/* fields */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px;margin-top:40px}
.grid .full{grid-column:1/-1}
.f label,.f .lbl{display:block;font-size:14px;font-weight:500;color:var(--t2);margin-bottom:8px}
.f .opt{color:var(--t3);font-weight:400}
.f .hint{font-size:13px;color:var(--t3);margin-top:8px;line-height:1.5}
.f .err{display:none;font-size:13px;color:var(--alert);margin-top:8px}
.f.bad .err{display:block} .f.bad input,.f.bad select,.f.bad textarea{border-color:var(--alert)} .f.bad input:focus,.f.bad select:focus{box-shadow:none}
input,select,textarea{width:100%;font:400 16px/1.4 var(--font-body);color:var(--t1);background:var(--field);border:1px solid var(--line-2);border-radius:var(--r);
  padding:0 16px;height:52px;transition:border-color var(--fast) var(--ease-standard),background var(--fast),box-shadow var(--fast)}
textarea{height:auto;min-height:104px;padding:14px 16px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--t4)}
input:hover,select:hover,textarea:hover{background:var(--field-hover)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--here);box-shadow:0 0 0 3px var(--here-18)}
select{appearance:none;cursor:pointer;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f2efe8' stroke-opacity='.58' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
select:invalid{color:var(--t4)} select option{background:var(--ink);color:var(--t1)}
.prefix{position:relative} .prefix span{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--t3)} .prefix input{padding-left:30px}

/* options: ruled rows in a 2-col grid (the site's "01 / LEADS" cells), not SaaS pills */
.opts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:18px}
.opts.days{grid-template-columns:repeat(7,1fr);border:1px solid var(--line-2);border-radius:var(--r);margin-top:0}
.chip{display:flex;align-items:center;gap:16px;min-height:56px;padding:0 16px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--t2);
  font:500 15px/1.3 var(--font-body);text-align:left;cursor:pointer;transition:background var(--fast),color var(--fast);position:relative}
.opts:not(.days) .chip:nth-child(odd){border-right:1px solid var(--line)}
.chip .n{font:500 11px var(--font-utility);letter-spacing:.1em;color:var(--t4);width:18px;flex:none}
.chip .box{margin-left:auto;width:16px;height:16px;border:1px solid var(--line-2);border-radius:1px;flex:none;display:grid;place-items:center;transition:background var(--fast),border-color var(--fast)}
.opts:not(.days) .chip:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
.chip:hover{background:var(--field-hover);color:var(--t1)}
.chip[aria-pressed="true"]{color:var(--t1);background:color-mix(in srgb,var(--violet) 7%,transparent)}
.chip[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--commit)}
.chip[aria-pressed="true"] .n{color:var(--commit-hover)}
.chip[aria-pressed="true"] .box{background:var(--commit);border-color:var(--commit)}
.chip[aria-pressed="true"] .box::after{content:"";width:8px;height:4px;border:solid var(--ivory);border-width:0 0 1.6px 1.6px;transform:translateY(-1px) rotate(-45deg)}
.days .chip{justify-content:center;min-height:52px;padding:0;border-bottom:0;border-right:1px solid var(--line);font-size:14px}
.days .chip:last-child{border-right:0}
.days .chip .box{display:none}
.days .chip[aria-pressed="true"]::before{left:0;right:0;top:auto;bottom:0;width:auto;height:2px}
.chip:focus-visible,.seg button:focus-visible,.btn:focus-visible,.link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--here-18);border-color:var(--here)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r)}
.seg button{min-height:44px;padding:0 20px;border:0;background:transparent;color:var(--t3);font:500 15px var(--font-body);cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--commit-18);color:var(--t1);box-shadow:inset 0 -2px 0 var(--commit)}

/* custom checkbox (attest) */
.check{appearance:none;width:20px;min-width:20px;height:20px;padding:0;flex:none;margin:2px 0 0;border:1px solid var(--line-2);border-radius:var(--r);background:var(--field);cursor:pointer;display:grid;place-items:center}
.check:checked{background:var(--commit);border-color:var(--commit)}
.check:checked::after{content:"";width:9px;height:5px;border:solid var(--ivory);border-width:0 0 1.8px 1.8px;transform:translateY(-1px) rotate(-45deg)}
.check:focus-visible{outline:none;box-shadow:0 0 0 3px var(--here-18);border-color:var(--here)}
.check.bad{border-color:var(--alert)}

/* one calm error summary per step */
.summary{display:none;margin-top:32px;padding:14px 18px;border:1px solid color-mix(in srgb,var(--alert) 45%,transparent);border-left-width:2px;border-radius:var(--r);color:var(--t1);font-size:15px}
.summary.on{display:block}
.summary .micro{color:var(--alert);margin-right:10px}

/* buttons: square, the site's "Start here ↘" */
.btn{display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 24px;border:1px solid var(--commit);border-radius:var(--r);background:var(--commit);color:#fff;
  font:600 15px var(--font-body);letter-spacing:.01em;cursor:pointer;transition:background var(--fast) var(--ease-standard),transform 60ms}
.btn:hover{background:var(--commit-hover)} .btn:active{transform:translateY(1px)} .btn[disabled]{opacity:.5;cursor:progress}
.btn svg{width:15px;height:15px}
.link{background:none;border:0;border-radius:var(--r);color:var(--t2);font:500 15px var(--font-body);cursor:pointer;padding:8px 0;display:inline-flex;align-items:center;gap:10px}
.link:hover{color:var(--t1)}

@media (max-width:640px){.grid{grid-template-columns:1fr;gap:20px}.opts:not(.days){grid-template-columns:1fr}.opts:not(.days) .chip:nth-child(odd){border-right:0}.days .chip{font-size:13px}.lede{font-size:16px}.arc{display:none}
  .seg{display:grid;width:100%}.seg button{border-right:0;border-bottom:1px solid var(--line);text-align:left;padding:0 16px}.seg button:last-child{border-bottom:0}
  .seg button[aria-pressed="true"]{box-shadow:inset 2px 0 0 var(--commit)}}
@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}