/* unwindrn.com: shared styles for every marketing page.
   "Golden Hour", matching the app (src/theme/tokens.ts, design/ember/v2): cream ground
   warming to peach toward the bottom, warm brown ink, terracotta for days and accents,
   slate blue for nights, frosted white glass cards.
   Every accent on the site is the app's own terracotta (#DE794C, rgb 222,121,76) and every
   night is the app's slate blue (#6086A8), so the demos and the page read as one palette.
   Body text never goes lighter than --ink-3. */
:root{
  color-scheme:light;
  --cream:#FBF0E1;
  --sand:#F8E6D2;
  --peach:#F7DECB;
  --ink:#3E2E24;              /* text, rgb 62,46,36 */
  --ink-2:#5E4E43;            /* secondary text, 7:1 on cream */
  --ink-3:#6B5A4E;            /* tertiary text, 5.8:1 on cream */
  --rule:rgba(62,46,36,.12);
  --rule-2:rgba(62,46,36,.07);
  --accent:#DE794C;           /* fills, marks, large decoration */
  --accent-hi:#EE9870;
  --accent-ink:#DE794C;       /* the app's terracotta, used for accent text too */
  --night:#6086A8;            /* night-shift data */
  --night-ink:#6086A8;        /* the app's slate blue */
  --word-ink:#262119;
  --word-rn:#A9531F;
  --focus:#3E2E24;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --glass:radial-gradient(110% 60% at 0% 0%,rgba(255,255,255,.42),rgba(255,255,255,0) 55%) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.36)) padding-box,
    linear-gradient(135deg,#fff,rgba(255,255,255,.4) 25%,rgba(255,255,255,.05) 50%,rgba(214,130,90,.25) 75%,rgba(255,255,255,.85)) border-box;
  --glass-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 0 18px rgba(255,255,255,.35),inset 0 -2px 4px rgba(180,90,50,.06),0 18px 40px rgba(160,80,40,.14),0 2px 8px rgba(160,80,40,.06);
  --wrap:1160px;
  --gut:clamp(20px,4vw,40px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--cream)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:linear-gradient(180deg,var(--cream) 0,var(--cream) 30%,var(--sand) 72%,var(--peach) 100%)}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--cream);padding:10px 14px;border-radius:10px;font-weight:600;z-index:50}
.skip:focus{top:12px}

h1,h2{font-family:var(--serif);font-weight:300;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(44px,6.2vw,80px);line-height:1.03;letter-spacing:-.018em}
h2{font-size:clamp(32px,3.9vw,50px);line-height:1.1;letter-spacing:-.012em}
h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.25;color:var(--ink);text-wrap:balance}
p{max-width:38em}
.lede{font-size:clamp(18px,1.6vw,20px);line-height:1.55;color:var(--ink-2)}
.mono,.kicker{font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.kicker{display:block;color:var(--accent-ink);margin-bottom:18px}

/* lockup: lantern + wordmark */
.lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.lockup .lt{width:15px;height:26px;color:var(--ink)}
.lockup .wm{width:104px;height:23px}
.lt{overflow:visible}

/* header */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(251,240,225,.82);
  backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);
  border-bottom:1px solid var(--rule-2)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:12px var(--gut);display:flex;align-items:center;gap:40px}
.nav-links{display:flex;gap:30px}
.nav-links a{font:500 15px var(--sans);color:var(--ink-2);text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-cta{margin-left:auto}
.nav-side{margin-left:auto;font:500 15px var(--sans);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.nav-side:hover{color:var(--ink)}
.nav-side+.nav-cta{margin-left:0}
@media (max-width:820px){.nav-links{display:none}}
@media (max-width:820px){.nav-in{gap:20px}}
@media (max-width:400px){.nav-side{display:none}.nav-side+.nav-cta{margin-left:auto}.nav-in{gap:12px}.lockup .wm{width:92px}}

/* buttons. Primary: the app's terracotta pill, deepened so white text clears 4.5:1. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 28px;
  font:600 16px/1 var(--sans);color:var(--cream);text-decoration:none;white-space:nowrap;cursor:pointer;border-radius:999px;
  background:linear-gradient(160deg,var(--accent-hi),var(--accent));border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 24px rgba(222,121,76,.30);transition:filter .15s ease,box-shadow .15s ease}
.btn:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 28px rgba(222,121,76,.4)}
.btn.sm{height:40px;padding:0 18px;font-size:14.5px}
.btn.quiet{color:var(--accent-ink);background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(120,80,50,.1)}
.btn.quiet:hover{filter:none;background:rgba(255,255,255,.85)}
.btn svg{width:13px;height:13px;flex:none}
.signup{display:flex;gap:10px;max-width:470px}
.field{flex:1;min-width:0;height:52px;background:rgba(255,255,255,.72);color:var(--ink);border:1px solid rgba(62,46,36,.2);
  border-radius:999px;padding:0 22px;font:400 16px var(--sans);box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(120,80,50,.06)}
.field::placeholder{color:var(--ink-3)}
.field:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(148,70,26,.16)}
.form-ok{display:none;font-size:16px;line-height:1.5;color:var(--ink);background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.95);border-radius:20px;padding:14px 18px;max-width:470px;box-shadow:0 8px 20px rgba(120,80,50,.08)}
.form-ok strong{font-weight:600}
.card .form-ok{background:none;border:0;box-shadow:none;padding:0}
.form-note{font-size:14.5px;color:var(--ink-3);margin-top:14px}
@media (max-width:520px){.signup{flex-direction:column}.signup .field{flex:none;width:100%}.signup .btn{width:100%}}

/* sections and glass */
.sec{padding:clamp(80px,10vw,128px) 0}
.sec+.sec{padding-top:0}
.sec-head{max-width:42rem}
.sec-head .lede{margin-top:18px}
.card{background:var(--glass);border:1.5px solid transparent;border-radius:24px;box-shadow:var(--glass-shadow)}
.tile{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:rgba(222,121,76,.12);border:1px solid rgba(222,121,76,.24)}
.tile svg{width:15px;height:15px}
.halo{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,214,150,.7),rgba(222,121,76,.3) 32%,rgba(222,121,76,.09) 55%,rgba(222,121,76,0) 72%)}

/* ---------- Phone frames. Screens are built at the app's 393x852 pt canvas and scaled. ---------- */
.phone{--k:.71756;position:relative;width:300px;flex:none;padding:9px;border-radius:52px;background:#2B231E;
  box-shadow:0 0 0 1px #4A3D35 inset,0 0 0 2px #1C1714,0 44px 80px -24px rgba(140,70,35,.42),0 14px 30px -10px rgba(140,70,35,.22)}
.phone.lg{--k:.81934;width:340px}
@media (max-width:420px){.phone.lg{--k:.71756;width:300px}}
@media (max-width:350px){.phone,.phone.lg{--k:.65;width:273.5px}}
.scr{position:relative;width:calc(393px * var(--k));height:calc(852px * var(--k));border-radius:calc(46px * var(--k));overflow:hidden;background:#FBF0E1}
.app{position:absolute;left:0;top:0;width:393px;height:852px;transform:scale(var(--k));transform-origin:0 0;
  font:400 15px/1.35 var(--sans);color:#3E2E24;text-align:left;
  background:radial-gradient(ellipse 160% 78% at 50% 112%,rgba(232,128,86,.48),rgba(240,160,120,.24) 48%,rgba(251,240,225,0) 84%),
    radial-gradient(ellipse 92% 44% at 50% 28%,rgba(222,121,76,.16),rgba(222,121,76,.04) 50%,transparent 78%),#FBF0E1}
.app .isl{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:118px;height:33px;border-radius:20px;background:#000;z-index:3}
.app .sb{position:absolute;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:15px 32px 0;font:600 15px var(--sans)}
.app .sb svg{display:inline-block}
.app .body{position:absolute;top:70px;left:0;right:0;bottom:0;padding:0 24px;display:flex;flex-direction:column}
.app .hd{height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.app .hd b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.app .back{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(120,80,50,.08)}
.app .mn{font:600 9.5px/13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(62,46,36,.48)}
.app .lb{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px}
.app .lb .mn{color:rgba(222,121,76,.9)}
.app .lb span:last-child:not(.mn){font-size:13px;color:rgba(62,46,36,.5)}
.app .sp{font-family:var(--serif)}
.app .n{font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-weight:400}
.app .gl{background:radial-gradient(110% 60% at 0% 0%,rgba(255,255,255,.42),rgba(255,255,255,0) 55%) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.26)) padding-box,
    linear-gradient(135deg,#fff,rgba(255,255,255,.4) 25%,rgba(255,255,255,.05) 50%,rgba(214,130,90,.25) 75%,rgba(255,255,255,.85)) border-box;
  border:1.5px solid transparent;border-radius:20px;box-shadow:var(--glass-shadow)}
.app .pill{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(120,80,50,.08)}
.app .pri{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 28px;border-radius:999px;
  font-size:16px;font-weight:600;color:#FBF0E1;background:linear-gradient(160deg,#EE9870,#DE794C);
  border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 24px rgba(222,121,76,.3)}
.app .rule{height:1px;background:rgba(62,46,36,.08)}
.app .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
.app .trio>div+div{border-left:1px solid rgba(62,46,36,.1)}
.app .trio .n{font-size:26px;line-height:30px}
.app .trio .mn{margin-top:6px;color:rgba(62,46,36,.45)}
.app .ico{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;background:rgba(222,121,76,.12);border:1px solid rgba(222,121,76,.22)}
.app .chips{display:flex;flex-wrap:wrap;gap:8px}
.app .chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;font-size:14px;
  color:rgba(62,46,36,.72);background:rgba(255,255,255,.45);border:1px solid rgba(62,46,36,.12)}
.app .chip.on{font-weight:600;color:#DE794C;background:linear-gradient(180deg,rgba(222,121,76,.17),rgba(222,121,76,.07));border-color:rgba(222,121,76,.38)}
.app .chip.add{color:#DE794C;font-weight:600;border:1px dashed rgba(222,121,76,.6);background:transparent}
.app .chip.s{height:32px;padding:0 13px;font-size:13px}
.app .seg{display:flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.45);border:1px solid rgba(62,46,36,.1)}
.app .seg span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:32px;border-radius:999px;font-size:14px;
  color:rgba(62,46,36,.62);border:1px solid transparent}
.app .seg span.on{background:rgba(255,255,255,.95);border-color:rgba(222,121,76,.38);color:#DE794C;font-weight:600;box-shadow:0 4px 10px rgba(160,80,40,.08)}
.app .slider{position:relative;height:30px;margin:0 6px}
.app .slider .tr{position:absolute;left:0;right:0;top:13px;height:4px;border-radius:2px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(62,46,36,.05)}
.app .slider .fl{position:absolute;left:0;top:13px;height:4px;border-radius:2px;background:linear-gradient(90deg,rgba(222,121,76,.45),#DE794C)}
.app .slider i{position:absolute;top:13.5px;width:3px;height:3px;border-radius:50%;background:rgba(62,46,36,.25);transform:translateX(-50%)}
.app .slider .th{position:absolute;top:2px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px rgba(62,46,36,.06),0 4px 10px rgba(120,60,30,.2)}
.app .ends{display:flex;justify-content:space-between;font-size:12.5px;color:rgba(62,46,36,.5);margin-top:2px}

/* Home */
.app .home-hd{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:44px}
.app .ava{justify-self:end;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(222,121,76,.16);border:1px solid rgba(222,121,76,.4);font:400 16px var(--serif);color:#DE794C}
.app .lamp{position:relative;display:flex;justify-content:center;height:180px;align-items:center}
.app .lamp .halo{width:300px;height:300px;left:50%;top:56%;margin:-150px 0 0 -150px}
.app .lamp svg{position:relative;width:100px;height:171px;color:#3E2E24}
.app .strip{display:grid;grid-template-columns:repeat(3,1fr);padding:6px 3px}
.app .strip>div{text-align:center;padding:14px 4px 13px;margin:0 3px;border-radius:16px;border:1px solid transparent}
.app .strip>div.td{background:linear-gradient(180deg,rgba(222,121,76,.17),rgba(222,121,76,.07));border-color:rgba(222,121,76,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 6px 16px rgba(222,121,76,.16)}
.app .strip .n{font-size:28px;line-height:32px;margin-top:8px}
.app .strip .w{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:8px;font-size:13px;color:rgba(62,46,36,.5)}
.app .strip .td .mn,.app .strip .td .w{color:#DE794C}
.app .strip .td .mn{font-weight:700}
.app .badges{display:flex;gap:7px}
.app .badges span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.app .b-a{background:rgba(222,121,76,.1);border:1px solid rgba(222,121,76,.35)}
.app .b-n{background:rgba(96,134,168,.1);border:1px solid rgba(96,134,168,.35)}
.app .b-i{background:rgba(62,46,36,.1);border:1px solid rgba(62,46,36,.35)}
.app .prog{height:3px;border-radius:2px;background:rgba(62,46,36,.08);margin-top:12px;overflow:hidden}
.app .prog i{display:block;height:100%;border-radius:2px;background:#DE794C}

/* Log shift */
.app .datec{display:flex;padding:16px 16px 16px 0}
.app .datec .dd{width:86px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid rgba(62,46,36,.1)}
.app .datec .dd .n{font-size:34px;line-height:38px;margin:2px 0}
.app .datec .dr{flex:1;padding-left:14px;min-width:0}
.app .datec .row{display:flex;align-items:center;justify-content:space-between}
.app .step{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);box-shadow:0 4px 10px rgba(120,80,50,.08);color:#DE794C;font-size:18px;line-height:1}

/* Logbook */
.app .heat{padding:14px 14px 12px}
.app .heat .r{display:flex;align-items:center;gap:8px;height:11px}
.app .heat .r .mn{width:26px;flex:none;font-size:8.5px;color:rgba(62,46,36,.4)}
.app .heat .c{display:flex;gap:2px;flex:1}
.app .heat .c i{flex:1;height:7px;border-radius:2px;background:rgba(62,46,36,.06)}
.app .heat .c i.m{background:rgba(62,46,36,.1)}
.app .heat .c i.d{background:#DE794C}
.app .heat .c i.nt{background:#6086A8}
.app .legend{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(62,46,36,.08);font-size:12px;color:rgba(62,46,36,.55)}
.app .legend span{display:flex;align-items:center;gap:6px}
.app .legend b{width:8px;height:8px;border-radius:2px}
.app .srch{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:14px}
.app .res{padding:2px 16px}
.app .res>div{display:flex;gap:14px;padding:13px 0;align-items:baseline}
.app .res>div+div{border-top:1px solid rgba(62,46,36,.08)}
.app .res em{font-style:normal;font-size:12px;font-weight:600;color:#DE794C;width:44px;flex:none}
.app .res p{font:300 16px/23px var(--serif);max-width:none}
.app .res .all{justify-content:center;height:44px;padding:0;align-items:center;font-size:14px;font-weight:600;color:#DE794C}

/* Career */
.app .tabs{display:flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.45);border:1px solid rgba(62,46,36,.1)}
.app .tabs span{flex:1;text-align:center;height:32px;line-height:30px;border-radius:999px;font-size:14px;color:rgba(62,46,36,.62);border:1px solid transparent}
.app .tabs span.on{background:rgba(255,255,255,.95);border-color:rgba(222,121,76,.38);color:#DE794C;font-weight:600}
.app .ins{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.app .ins>div{border-radius:16px;padding:12px 14px;min-width:0}
.app .ins .v{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:6px}
.app .ins .v .n{font-size:24px;line-height:28px}
.app .ins small{display:block;font-size:12px;line-height:16px;color:rgba(62,46,36,.55);margin-top:6px}
.app .ins small b{font-weight:600;color:#DE794C}
.app .bars{display:flex;align-items:flex-end;gap:2px;height:26px}
.app .bars i{width:3px;border-radius:1px;background:rgba(222,121,76,.45)}
.app .bars i.hi{background:#DE794C}

/* Covered (invite code) */
.app .ok{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto;
  background:linear-gradient(180deg,rgba(222,121,76,.16),rgba(222,121,76,.06));border:1px solid rgba(222,121,76,.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}

/* floating cards around a phone */
.float{position:absolute;z-index:4;display:flex;gap:12px;align-items:center;padding:12px 16px 12px 12px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,250,244,.86)) padding-box,linear-gradient(135deg,#fff,rgba(255,255,255,.5) 40%,rgba(214,130,90,.28) 75%,#fff) border-box;border:1.5px solid transparent;box-shadow:var(--glass-shadow);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);font:400 13.5px/1.35 var(--sans);color:var(--ink)}
.float b{display:block;font-weight:600;font-size:14.5px}
.float span{color:var(--ink-3)}

/* footer */
.foot{border-top:1px solid var(--rule);padding:64px 0 48px}
.foot-in{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.foot-brand p{font-size:15px;color:var(--ink-2);margin-top:16px;max-width:20em;line-height:1.55}
.foot h4{font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px}
.foot nav{display:flex;flex-direction:column;gap:10px}
.foot nav a{font-size:15px;color:var(--ink-2);text-decoration:none}
.foot nav a:hover{color:var(--ink);text-decoration:underline}
.foot-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  font-size:14px;color:var(--ink-2);padding-top:28px;margin-top:16px;border-top:1px solid var(--rule-2);max-width:none}
@media (max-width:820px){.foot-in{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* small standalone pages (thanks, 404) */
.solo{overflow-x:clip;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:radial-gradient(ellipse 120% 60% at 50% 112%,rgba(232,128,86,.34),rgba(240,160,120,.16) 48%,rgba(251,240,225,0) 84%),var(--cream)}
.solo header{padding:20px var(--gut)}
.solo main{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px var(--gut) 96px}
.solo .mark{position:relative;width:64px;height:110px;margin:0 auto 36px}
.solo .mark .halo{width:220px;height:220px;left:50%;top:58%;margin:-110px 0 0 -110px}
.solo .mark svg{position:relative;width:64px;height:110px;color:var(--ink)}
.solo .lede{margin:20px auto 0}
.solo .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}