/* ReUse BLUE marketing site. Cobalt Signal with a deep blue-ink band; warm, founder-led, built for phones first. */
:root{
  --blue:#1531e6; --blue-ink:#0a1440; --blue-ink-2:#14215c; --blue-soft:#a9b8ff; --blue-tint:#eef1fe; --on-blue:#ffffff;
  --ink:#0c1324; --muted:#465066; --faint:#5f697d; --paper:#ffffff; --ground:#f4f6fb; --rule:#d9def0; --rule-2:#b8c1dd;
  --wa:#1f8f4e; --err:#b42318;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --blue:#7d93ff; --blue-ink:#070d2b; --blue-ink-2:#101a48; --blue-soft:#a9b8ff; --blue-tint:#141d3f; --on-blue:#060a1a;
  --ink:#e8ecf5; --muted:#adb5c9; --faint:#959eb3; --paper:#0d1220; --ground:#0a0f1d; --rule:#1f2944; --rule-2:#33406a;
  --wa:#2fa862; --err:#ff8a80; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6}
a{color:var(--blue);text-underline-offset:3px}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.gut{padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
.in{max-width:1120px;margin:0 auto}
.lbl,.eyebrow{font-family:var(--mono);font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.eyebrow{margin:0 0 16px}
h1,h2,h3{font-weight:700;letter-spacing:-.03em;text-wrap:balance;margin:0;color:var(--ink)}
h1{font-size:clamp(40px,6.6vw,66px);line-height:1.05}
h1 em,h2 em{font-style:normal;color:var(--blue)}
h2{font-size:clamp(32px,4.4vw,46px);line-height:1.08}
h3{font-size:22px;line-height:1.25;letter-spacing:-.015em}
p{margin:0}
.lead{font-size:20px;line-height:1.6;color:var(--muted);max-width:52ch}
.sub{font-size:clamp(24px,2.8vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:26px 0 18px}
/* announcement */
.announce{background:var(--blue-ink);color:#e6eaff;text-align:center;font-size:16px;padding-block:13px}
.announce a{color:var(--blue-soft);font-weight:600}
/* header */
.head{border-bottom:1px solid var(--rule)}
.head .in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:20px}
.wm{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.wm svg{width:44px;height:44px;color:var(--blue);flex:none}
.wm b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.wm b span{color:var(--blue)}
.wm small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--faint);text-transform:uppercase}
.head nav{display:flex;gap:10px 26px;flex-wrap:wrap;align-items:center}
.head nav a{color:var(--ink);text-decoration:none;font-size:17px}
.head nav a:hover{text-decoration:underline}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 28px;border-radius:12px;font:600 18px var(--sans);text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn.solid{background:var(--blue);color:var(--on-blue)}
.btn.ink{background:var(--blue-ink);color:#fff}
.btn.quiet,.btn.outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.soft{background:var(--blue-soft);color:var(--blue-ink)}
.btn.wa{background:var(--wa);color:#fff}
.btn svg{width:22px;height:22px;flex:none}
.head nav .btn{min-height:48px;padding:10px 20px;font-size:17px;color:#fff}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.ticks{list-style:none;margin:28px 0 0;padding:0;display:flex;gap:12px 30px;flex-wrap:wrap;font-family:var(--mono);font-size:14.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ticks li::before{content:"✓  ";color:var(--ink)}
/* hero */
.hero .in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding-block:72px}
@media (max-width:900px){.hero .in{grid-template-columns:minmax(0,1fr);gap:44px;padding-block:56px}}
/* portrait in viewfinder brackets */
.portrait{position:relative;padding:26px;max-width:440px;width:100%;justify-self:center;margin:0}
.portrait::before,.portrait::after{content:"";position:absolute;width:58px;height:58px;border:0 solid var(--blue)}
.portrait::before{top:0;left:0;border-top-width:4px;border-left-width:4px}
.portrait::after{bottom:0;right:0;border-bottom-width:4px;border-right-width:4px}
.portrait .frame{border-radius:10px;overflow:hidden;background:var(--ground)}
.portrait img{width:100%;height:auto;aspect-ratio:560/744;object-fit:cover;border-bottom:4px solid var(--blue)}
.portrait figcaption{padding:18px 24px 20px;font-family:var(--mono);text-transform:uppercase}
.portrait figcaption b{display:block;font-size:17px;letter-spacing:.18em;font-weight:500;color:var(--ink)}
.portrait figcaption span{font-size:13px;letter-spacing:.14em;color:var(--blue)}
/* steps card */
.steps{list-style:none;margin:0;padding:10px 34px;border:1.5px solid var(--rule);border-radius:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 34px;background:var(--paper)}
@media (max-width:820px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{padding-block:22px}
.steps .n{font-family:var(--mono);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.steps h3{margin-top:8px}
.steps p{margin-top:6px;color:var(--muted);font-size:16.5px}
.pad{padding-block:0 76px}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.steps.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.steps.four{grid-template-columns:minmax(0,1fr)}}
/* research digest */
.digest{border:1.5px solid var(--rule);border-radius:16px;overflow:hidden;max-width:880px}
.digest-top{padding:40px 40px 32px}
.digest-top .lead{margin-top:16px}
.digest-bottom{background:var(--blue-ink);color:#dfe4fb;padding:34px 40px 36px;display:flex;flex-direction:column;gap:18px}
.digest-bottom .f>span{color:#fff}
.digest-bottom .check{color:#c4cbea}
.digest-bottom .check strong{color:#fff}
.digest-bottom .check a{color:var(--blue-soft)}
.digest-bottom .small{color:#c4cbea}
@media (max-width:560px){.digest-top,.digest-bottom{padding-left:24px;padding-right:24px}}
.forms{display:flex;flex-direction:column;gap:24px;min-width:0}
input[type=file]{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1.5px solid var(--rule-2);border-radius:12px;padding:14px;width:100%;min-width:0}
input[type=file]::file-selector-button{font:600 15px var(--sans);border:0;border-radius:999px;background:var(--blue-tint);color:var(--blue);padding:8px 16px;margin-right:12px;cursor:pointer}
.size-err{color:var(--err);font-weight:600}
.wa-card{position:sticky;top:20px}
/* deep band */
.band{background:var(--blue-ink);color:#dfe4fb}
.band .in{padding-block:84px;display:flex;flex-direction:column;gap:22px}
.band .eyebrow{color:var(--blue-soft)}
.band h2{color:#fff}
.band h2 em{color:var(--blue-soft)}
.band .lead{color:#c4cbea;max-width:58ch}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 30px;border-top:1px solid #2a3770;margin-top:8px}
@media (max-width:820px){.pillars{grid-template-columns:minmax(0,1fr)}}
.pillars div{padding-block:20px}
.pillars .n{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft)}
.pillars h3{color:#fff;margin-top:6px}
.pillars p{color:#c4cbea;font-size:16.5px;margin-top:6px}
.quote{margin:18px 0 0;background:var(--blue-ink-2);border-left:6px solid var(--blue-soft);border-radius:16px;padding:34px 36px;display:flex;flex-direction:column;gap:20px;max-width:820px}
.quote blockquote{margin:0;font-size:clamp(21px,2.4vw,26px);line-height:1.55;color:#eef1ff}
.quote .call{font-size:clamp(20px,2.2vw,24px);font-weight:700;line-height:1.5;color:var(--blue-soft)}
.quote figcaption{font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-soft)}
/* weigh card */
.weigh{border:1.5px solid var(--rule);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:820px){.weigh{grid-template-columns:minmax(0,1fr)}}
.weigh .copy{padding:34px;display:flex;flex-direction:column;gap:14px}
.weigh .copy p{color:var(--muted)}
.scale{background:var(--blue-ink);color:#fff;padding:34px;display:flex;flex-direction:column;gap:14px}
.scale .lbl{color:var(--blue-soft)}
.read{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.read b{font-size:clamp(48px,6vw,64px);font-weight:500;letter-spacing:-.03em;line-height:1}
.read span{color:var(--blue-soft)}
.scale label{display:flex;justify-content:space-between;gap:8px}
.scale input[type=range]{width:100%;accent-color:var(--blue-soft);margin:0}
.derived{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:1px solid #2a3770;padding-top:14px}
.derived b{display:block;font-family:var(--mono);font-weight:500;font-size:19px;font-variant-numeric:tabular-nums}
.scale .note{color:#c4cbea}
.note{font-size:15px;color:var(--muted)}
/* ways */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.ways{grid-template-columns:minmax(0,1fr)}}
.way{border:1.5px solid var(--rule);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.way .lbl{font-size:13px}
.way p{color:var(--muted);font-size:16.5px}
.sec .in{padding-block:76px;display:flex;flex-direction:column;gap:26px}
/* register */
.register{background:var(--ground);border-top:1px solid var(--rule)}
.register .in{padding-block:80px;display:flex;flex-direction:column;gap:30px}
.register .grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:28px;align-items:start}
@media (max-width:900px){.register .grid{grid-template-columns:minmax(0,1fr)}}
form.card{background:var(--paper);border:1.5px solid var(--rule);border-radius:16px;padding:40px;display:flex;flex-direction:column;gap:22px}
@media (max-width:560px){form.card{padding:28px 24px}}
form.card h3{font-size:32px;letter-spacing:-.025em}
.f{display:flex;flex-direction:column;gap:10px;min-width:0}
.f>span{font-size:18px;font-weight:700}
.f small{font-weight:400;color:var(--faint);font-size:16px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{font:inherit;font-size:18px;color:var(--ink);background:var(--paper);border:1.5px solid var(--rule-2);border-radius:12px;padding:16px 16px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:620px){.row{grid-template-columns:minmax(0,1fr)}}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
legend{font-size:18px;font-weight:700;margin-bottom:10px;padding:0}
legend small{font-weight:400;color:var(--faint);font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:48px;padding:10px 18px;border:1.5px solid var(--rule-2);border-radius:999px;font-size:16.5px;background:var(--paper);cursor:pointer}
.chip input:checked+span{border-color:var(--blue);background:var(--blue-tint);color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.chip input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
details.notice{background:var(--blue-tint);border-radius:12px;padding:16px 20px}
details.notice summary{font-weight:700;cursor:pointer}
details.notice p{margin-top:10px;font-size:16px;color:var(--muted)}
.check{display:flex;gap:16px;align-items:flex-start;font-size:17px;color:var(--muted);line-height:1.55}
.check input{appearance:none;-webkit-appearance:none;width:32px;height:32px;margin:0;border:2px solid var(--rule-2);border-radius:9px;background:var(--paper);flex:none;cursor:pointer;display:grid;place-items:center}
.check input:checked{background:var(--blue);border-color:var(--blue)}
.check input:checked::after{content:"";width:9px;height:16px;border:solid #fff;border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
.check strong{color:var(--ink)}
.full{width:100%}
.small{font-size:16px;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wa-card{background:var(--blue-ink);color:#e6eaff;border-radius:16px;padding:30px;display:flex;flex-direction:column;gap:14px}
.wa-card h3{color:#fff}
.wa-card .num{font-family:var(--mono);font-size:18px;color:var(--blue-soft)}
/* faq */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
@media (max-width:760px){.faq{grid-template-columns:minmax(0,1fr)}}
.faq div{padding:20px 0;border-bottom:1px solid var(--rule)}
.faq h3{margin-bottom:6px;font-size:20px}
.faq p{color:var(--muted);font-size:16.5px}
/* footer */
footer{border-top:1px solid var(--rule)}
footer .in{padding-block:44px;display:flex;flex-direction:column;gap:18px;font-size:17px;color:var(--muted)}
footer p{max-width:78ch}
footer b{color:var(--ink)}
footer .links{display:flex;gap:10px 28px;flex-wrap:wrap}
footer .motto{font-family:var(--mono);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
/* floating WhatsApp */
.wa-float{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:20;display:inline-flex;align-items:center;gap:10px;background:var(--wa);color:#fff;text-decoration:none;font:600 16px var(--sans);padding:13px 18px;border-radius:999px;box-shadow:0 10px 28px -10px rgba(0,0,0,.45)}
.wa-float svg{width:24px;height:24px}
@media (max-width:520px){.wa-float span{display:none}.wa-float{padding:15px}}
/* simple pages (thanks, privacy, 404) */
.page .in{padding-block:72px;display:flex;flex-direction:column;gap:18px;max-width:760px}
.page p,.page li{color:var(--muted)}
.page h2{font-size:26px;margin-top:14px}
[id^=digiWrap]{display:flex;flex-direction:column;gap:14px}
textarea{resize:vertical;min-height:130px;line-height:1.5}
