/* gazetly.shop: the front page and /questions/. Warm ledger paper, a blue flag, rounded type. */
:root{--ac:#1F5C99;--ac-d:#153f6a;--ac-s:#DCE8F4;--ac-xs:#EEF4FA;--bg:#FBF5EA;--bg2:#F5ECDC;--paper:#FFFDF8;--ink:#1C2733;--mut:#55606B;--line:#E7DDCB;--bad:#A3361C;--bad-bg:#FCE7DF;--warn:#7E5200;--warn-bg:#FCEFD2;--ok:#1D6B45;--ok-bg:#E3F1E8}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 "Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
h1,h2,h3,.disp{font-family:"Fredoka","Nunito",system-ui,sans-serif;font-weight:600;letter-spacing:-.005em;text-wrap:balance}
p,li,dd{text-wrap:pretty}
a{color:var(--ac)}
img,svg{display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
@media (min-width:820px){.wrap{padding:0 40px}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons: chunky, pressable, like a rubber stamp */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:16px;background:var(--ac);color:#fff;font:600 1.0625rem/1.1 "Fredoka","Nunito",system-ui,sans-serif;text-decoration:none;border:0;cursor:pointer;box-shadow:0 4px 0 var(--ac-d);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--ac-d)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ac-d)}
.btn:focus-visible,a:focus-visible{outline:3px solid #F2A541;outline-offset:3px}
.btn.sm{min-height:44px;padding:0 18px;font-size:1rem;border-radius:14px}
.btn.light{background:#fff;color:var(--ac);box-shadow:0 4px 0 #0f2f50}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* nav */
nav.top .wrap{display:flex;align-items:center;gap:12px;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 1.25rem/1 "Fredoka","Nunito",system-ui,sans-serif;color:var(--ink);text-decoration:none}
.brand img{width:34px;height:34px;border-radius:10px}
.navright{margin-left:auto;display:flex;align-items:center;gap:6px}
.login{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink);font-weight:700;text-decoration:none;border-radius:12px}
.login:hover{background:var(--bg2)}

/* header */
header.hero{padding:20px 0 56px}
.hero h1{font-size:clamp(2.05rem,4.6vw,3.2rem);line-height:1.1;margin:0 0 16px}
.hero h1 em{font-style:normal;color:var(--ac)}
.sub{font-size:1.0625rem;margin:0 0 22px;color:#36414C;max-width:34em}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px}
.nocard{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--mut);font-size:.9375rem}
.nocard svg{flex:none}
.intro{margin-bottom:30px}
@media (min-width:980px){
  header.hero{padding:16px 0 64px}
  .intro{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:end;margin-bottom:34px}
  .hero h1{margin:0}
  .sub{margin-bottom:20px}
}

/* the product, as it runs */
.stage{position:relative;max-width:1080px;margin:0 auto}
.stage::before{content:"";position:absolute;inset:16px -8px -14px 10px;background:var(--ac-s);border-radius:32px}
.pin{position:absolute;top:-30px;right:30px;z-index:2;width:44px;height:56px}
@media (min-width:980px){.stage::before{inset:22px -22px -22px 22px;border-radius:40px}}
.screen{position:relative;z-index:1;background:var(--paper);border:1.5px solid var(--line);border-radius:24px;box-shadow:0 18px 44px rgba(70,50,20,.12);overflow:hidden;max-height:450px;font-size:.9rem}
.screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(rgba(255,253,248,0),var(--paper) 85%);pointer-events:none}
@media (min-width:980px){.screen{max-height:372px}}
.screen .bar{display:flex;align-items:center;gap:10px;padding:14px 86px 12px 20px;border-bottom:1.5px dashed var(--line)}
.screen .bar b{font:600 1.0625rem/1.2 "Fredoka","Nunito",system-ui,sans-serif}
.tag{font-size:.75rem;font-weight:800;color:var(--ac);background:var(--ac-xs);padding:3px 10px;border-radius:8px;white-space:nowrap}
.sumrow{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 20px;color:var(--mut);font-size:.8125rem;background:#FBF6EC}
.sumrow strong{color:var(--ink)}
.row{position:relative;padding:16px 20px 16px 44px;border-bottom:1px solid var(--line)}
.row .l1{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.nm{font-weight:800;font-size:.9375rem}
.uen{color:var(--mut);font-size:.8125rem;font-variant-numeric:tabular-nums}
.owed{margin-left:auto;font:600 1rem/1.3 "Fredoka","Nunito",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.row .meta{color:var(--mut);font-size:.8125rem;margin-top:4px}
.flag{margin-top:10px;padding:9px 12px;border-radius:12px;font-size:.8125rem;line-height:1.5}
.flag.bad{background:var(--bad-bg);color:#6A2312}
.flag.warn{background:var(--warn-bg);color:#523500}
/* a little paper flag on a flagged line, like the logo */
.row.f::before{content:"";position:absolute;left:20px;top:18px;width:2.5px;height:26px;border-radius:2px;background:var(--ink)}
.row.f::after{content:"";position:absolute;left:22px;top:19px;width:14px;height:12px;background:var(--bad);clip-path:polygon(0 0,100% 0,72% 50%,100% 100%,0 100%)}
.row.f.w::after{background:#D08A16}
.pill{display:inline-block;font-size:.75rem;font-weight:800;padding:1px 9px;border-radius:999px;white-space:nowrap}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
@media (min-width:980px){
  .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:28px;padding:16px 24px 16px 52px}
  .row .l1{grid-column:1}
  .row .meta{grid-column:1}
  .row .flag{grid-column:2;grid-row:1/3;margin:0;align-self:start}
  .row.f::before{left:26px}.row.f::after{left:28px}
}

/* sections */
section{padding:44px 0}
#what{padding-top:8px}
@media (min-width:820px){#what{padding-top:24px}}
.login,.btn.sm{white-space:nowrap}
@media (max-width:400px){.brand{font-size:1.125rem;gap:8px}.brand img{width:30px;height:30px}.login{padding:0 8px}}
@media (min-width:820px){section{padding:88px 0}}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.15;margin:0 0 12px}
.lead{color:var(--mut);margin:0 0 28px;max-width:36em}

/* how */
#how{background:var(--paper);border-radius:40px 40px 0 0}
#how h2{margin-bottom:24px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.step{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:start;background:var(--bg);border-radius:24px;padding:18px}
.step svg{width:72px;height:72px}
.step h3{font-size:1.125rem;line-height:1.25;margin:0 0 6px}
.step h3 span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:6px;border-radius:50%;background:var(--ac);color:#fff;font-size:.875rem;vertical-align:2px}
.step p{margin:0;color:var(--mut);font-size:.9375rem}
@media (min-width:820px){
  .steps{grid-template-columns:repeat(3,1fr);gap:22px}
  .step{grid-template-columns:1fr;padding:26px 26px 28px;border-radius:30px}
  .step svg{width:96px;height:96px}
}

/* what: the email */
#what{background:var(--paper)}
.what{display:grid;gap:28px}
.dates{display:flex;align-items:center;gap:10px;margin:0 0 4px;flex-wrap:wrap}
.day{background:var(--paper);border:2px solid var(--ink);border-radius:16px;width:104px;text-align:center;overflow:hidden;box-shadow:4px 4px 0 var(--ac-s)}
.day b{display:block;background:var(--ac);color:#fff;font:600 .9375rem/1 "Fredoka","Nunito",system-ui,sans-serif;padding:7px 0}
.day.end b{background:var(--bad)}
.day span{display:block;font:600 2rem/1.1 "Fredoka","Nunito",system-ui,sans-serif;padding:8px 0 2px}
.day small{display:block;font-size:.75rem;color:var(--mut);font-weight:700;padding-bottom:8px}
.gap{flex:1 1 60px;min-width:60px;max-width:150px;text-align:center;font-weight:800;color:var(--ac);font-size:.875rem}
.gap::after{content:"";display:block;height:0;border-top:3px dashed var(--ac);margin-top:4px;border-radius:2px}
.mail{background:#fff;border:1.5px solid var(--line);border-radius:24px;overflow:hidden;font-size:.9rem;box-shadow:0 14px 36px rgba(70,50,20,.10)}
.mail .hd{padding:14px 20px;border-bottom:1.5px dashed var(--line);background:var(--ac-xs)}
.mail .hd div{color:var(--mut);font-size:.8125rem}
.mail .hd b{display:block;font-size:.975rem;line-height:1.35;margin-top:2px}
.sample{font-size:.8125rem;font-weight:800;color:var(--ac)}
.mail .bd{padding:16px 20px 20px;line-height:1.6}
.mail .bd p{margin:0 0 10px}
.mail .bd ul{margin:0 0 10px;padding-left:20px}
.mail .bd .small{font-size:.8125rem;color:var(--mut);margin:0}
@media (min-width:900px){.what{grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}}

/* price and questions */
.price{display:grid;gap:36px}
.plan{position:relative;background:var(--ac);color:#fff;border-radius:36px;padding:32px 26px 28px;overflow:hidden}
.plan::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08)}
.plan h2{color:#fff;font-size:1.375rem;margin:0 0 10px}
.amt{font:600 3.6rem/1 "Fredoka","Nunito",system-ui,sans-serif;letter-spacing:-.01em}
.amt small{font-size:1.125rem;font-weight:500;opacity:.9}
.plan ul{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:9px}
.plan li{position:relative;padding-left:30px}
.plan li::before{content:"";position:absolute;left:3px;top:.45em;width:13px;height:7px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg)}
.plan .btn{width:100%}
.plan .fine{margin:14px 0 0;text-align:center;font-size:.9375rem;color:#E3EDF7}
#faq h2{margin-bottom:18px}
.qa{margin:0;padding:0}
.qa div{padding:16px 0;border-top:1.5px dashed var(--line)}
.qa dt{font:600 1.125rem/1.3 "Fredoka","Nunito",system-ui,sans-serif;margin:0 0 4px}
.qa dd{margin:0;color:#3E4955;font-size:.9375rem}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:800;margin-top:8px}
@media (min-width:900px){.price{grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}.plan{padding:40px 36px 34px}}

/* band */
section.band{padding:0 0 64px}
.band .card{background:var(--ink);color:#fff;border-radius:36px;padding:36px 26px;display:grid;gap:20px;align-items:center}
.band h2{color:#fff;margin:0}
.band p{margin:6px 0 0;color:#C9D3DD}
.band .btn{background:#fff;color:var(--ink);box-shadow:0 4px 0 #8C99A6;justify-self:start}
@media (min-width:820px){.band .card{grid-template-columns:1fr auto;padding:48px 56px}section.band{padding:0 0 88px}}

/* footer */
footer{padding:36px 0 48px;font-size:.9rem;color:var(--mut);border-top:1.5px dashed var(--line)}
footer .wrap{display:grid;gap:12px}
footer a{color:var(--ink)}
footer nav a,footer .links a{display:inline-block;padding:10px 2px}
footer p{margin:0;max-width:60em}

/* /questions/ */
.page-head{padding:24px 0 8px}
.page-head h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.1;margin:0 0 12px}
.qsec{padding:40px 0}
@media (min-width:820px){.qsec{padding:56px 0}}
.qsec.paper{background:var(--paper)}
.qcols{display:grid;gap:0 56px}
@media (min-width:900px){.qcols{grid-template-columns:1fr 1fr}}
.try{background:var(--paper);border:1.5px solid var(--line);border-radius:24px;padding:22px}
.try form{display:flex;gap:10px;flex-wrap:wrap}
.try input{flex:1 1 220px;min-width:0;min-height:52px;padding:0 16px;border:2px solid #CFC3AE;border-radius:14px;font:inherit;background:#fff;color:var(--ink)}
.try input:focus{outline:3px solid var(--ac-s);border-color:var(--ac)}
.hint{color:var(--mut);font-size:.875rem;margin:10px 0 0}
#try-out{margin-top:18px}
#try-out:empty{display:none}
.res{border:1.5px solid var(--line);border-radius:16px;padding:16px;background:#fff;overflow-wrap:anywhere}
.res dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:10px 0 0;font-size:.9375rem}
.res dt{color:var(--mut)}
.res dd{margin:0;min-width:0}
.cands{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.cands button{width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;font:inherit;color:var(--ink);cursor:pointer;min-height:44px}
.cands button:hover{border-color:var(--ac)}
.bars{display:grid;gap:12px;margin:0;padding:0;list-style:none;max-width:640px}
.bars li{display:grid;grid-template-columns:7.5em 1fr 4em;gap:12px;align-items:center;font-size:.9375rem}
.bars .track{height:16px;background:var(--bg2);border-radius:8px;overflow:hidden}
.bars .fill{display:block;height:100%;background:var(--ac);border-radius:8px}
.bars .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:800}
.note{font-size:.8125rem;color:var(--mut);margin-top:16px}
.stats{display:grid;gap:14px;margin-top:28px}
.stat{background:var(--paper);border-radius:22px;padding:18px 20px}
.stat b{display:block;font:600 1.9rem/1.2 "Fredoka","Nunito",system-ui,sans-serif;color:var(--ac)}
.stat span{font-size:.875rem;color:var(--mut)}
.stat a{font-size:.8125rem}
@media (min-width:820px){.stats{grid-template-columns:repeat(3,1fr)}}
.srcs{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.srcs li{background:var(--bg);border-radius:18px;padding:14px 18px;font-size:.9375rem}
.srcs li span{display:block;color:var(--mut);font-size:.875rem}
.who{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.who li{background:var(--paper);border-radius:20px;padding:16px 20px}
.who b{display:block;font-family:"Fredoka","Nunito",system-ui,sans-serif;font-weight:600;font-size:1.0625rem}
.who span{color:var(--mut);font-size:.9375rem}
@media (min-width:820px){.who{grid-template-columns:repeat(3,1fr)}}