/* Resolvity site styles (rebuilt 2026-11-04 for the young-men pivot, direction A + the ten-minute timer).
   One system for every page: near-black ground, white type, one accent (cyan) for the action and the timer.
   Type: Poppins only (the brand face), 400 to 800. Five sizes: display, h2, lead, body, small. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/poppins-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#0A0D12; --raised:#11161D; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.18); --field:rgba(255,255,255,.42);
  --text:#F5F7F9; --text2:#B7BEC7; --text3:#8B95A1;
  --accent:#06B6D4; --accent-hi:#22D3EE; --on-accent:#05080B; --teal:#0E7490;
  --display:Poppins,system-ui,sans-serif; --body:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-display:clamp(46px,9.4vw,96px); --fs-h2:clamp(32px,4.4vw,48px); --fs-lead:clamp(18px,1.7vw,20px); --fs-body:16px; --fs-small:14px;
  --gut:max(16px,5vw); --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px;scrollbar-color:#2A313B var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;caret-color:var(--accent)}
::selection{background:var(--accent);color:var(--on-accent)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-family:var(--display);text-wrap:balance}
h1{font-size:var(--fs-display);line-height:.98;letter-spacing:-.04em;font-weight:800}
h2{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.04em;font-weight:700}
h3{font-size:var(--fs-lead);line-height:1.3;letter-spacing:-.02em;font-weight:700}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.accent{color:var(--accent)}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--text2);max-width:36ch}
.small{font-size:var(--fs-small);color:var(--text3)}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 19px/1 var(--display);letter-spacing:-.04em}
.brand i{width:22px;height:22px;flex:none;border-radius:50% 50% 50% 6px;background:var(--teal);display:grid;place-items:center}
.brand i::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.top .small a{text-decoration:none}.top .small a:hover{color:var(--text)}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font:600 16px/1 var(--body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .2s,transform .15s var(--ease),opacity .2s}
.btn:hover{background:var(--accent-hi)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn[data-soon]:disabled{opacity:1;background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px rgba(6,182,212,.55)}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.btn svg{width:16px;height:16px}
.go{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--accent);text-decoration:none}
.go svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.go:hover svg{transform:translateX(3px)}

/* the signup: an underlined field and one button */
.signup{max-width:500px}
.signup .row{display:flex;gap:10px;align-items:center}
.signup input{flex:1;min-width:0;height:52px;background:transparent;border:0;border-bottom:1.5px solid var(--field);border-radius:0;color:var(--text);font:500 17px var(--body);padding:0 2px;outline:none;transition:border-color .2s}
.signup input::placeholder{color:#79828E}
.signup input:focus{border-bottom-color:var(--field)}
.signup input:focus-visible{outline:none}
.signup .note{margin-top:14px}
.thanks,.nokit{display:none;font-weight:600;margin-top:14px}
.thanks{color:var(--accent)}.nokit{color:#FBBF24}
.sent .thanks,.unwired .nokit{display:block}
.sent .row,.sent .note{display:none}
@media (max-width:560px){.signup .row{flex-direction:column;align-items:stretch;gap:12px}.signup .btn{width:100%}}

/* the field's underline draws across in cyan when you tap into it */
.signup input{background:linear-gradient(var(--accent),var(--accent)) left bottom/0 1.5px no-repeat;transition:background-size .5s var(--ease),border-color .2s}
.signup input:focus{background-size:100% 1.5px}

/* scroll reveals (js/motion.js): things lift into place as you reach them, once each */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .rv-h{overflow:hidden;padding-bottom:.1em}
.js .rv-h > span{display:block;transform:translateY(110%);transition:transform 1s var(--ease);transition-delay:var(--d,0s)}
.js .rv-h.in > span{transform:none}

/* a booklet you could pick up: the cover turned a little toward you, a hinge at the spine, cream page edges, a shadow under it.
   Used for the free guide and the 30-Day Reset. Size it with --w. It floats a few pixels, slowly; reduced motion stops that. */
.book{--w:200px;--d:calc(var(--w) * .1);position:relative;width:var(--w);aspect-ratio:9/16;perspective:1400px}
.book::after{content:"";position:absolute;left:4%;right:-10%;bottom:-6%;height:8%;border-radius:50%;background:rgba(0,0,0,.7);filter:blur(10px);z-index:-1;transition:transform .9s var(--ease)}
.book .b3{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-30deg) rotateX(4deg);transition:transform .9s var(--ease)}
.book:hover .b3{transform:rotateY(-10deg) rotateX(2deg)}
.js .book .b3{animation:bob 7s ease-in-out infinite alternate}
@keyframes bob{from{translate:0 0}to{translate:0 -6px}}
.book .front,.book .back{position:absolute;inset:0;border-radius:2px 8px 8px 2px}
.book .back{transform:translateZ(calc(var(--d) / -2));background:#050A0E}
.book .pages{position:absolute;top:1.2%;bottom:1.2%;left:calc(100% - var(--d) / 2 - 2px);width:var(--d);transform:rotateY(90deg);background:linear-gradient(90deg,#D8CFBB,#F3EEE2 45%,#E6DECC 70%,#CFC5AF)}
.book .front{transform:translateZ(calc(var(--d) / 2));overflow:hidden}
.book .front svg{width:100%;height:100%}

/* placeholders Dylan fills in: plain text live, dashed yellow boxes when reviewing on this computer */
.slot{font-weight:600}
.review .slot{background:rgba(251,191,36,.14);color:#FCD34D;outline:1.5px dashed #FBBF24;outline-offset:2px;border-radius:6px;padding:1px 6px}
.review .slot-link{outline:1.5px dashed #FBBF24;outline-offset:4px;border-radius:6px}

/* footer */
.foot{border-top:1px solid var(--line);padding:26px 0 40px;font-size:var(--fs-small);color:var(--text3)}
.foot .wrap{display:flex;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot a{text-decoration:none;color:var(--text2)}.foot a:hover{color:var(--text)}

@media (prefers-reduced-motion:reduce){.book .b3{animation:none!important}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}}
