/* Layout: dopamine, matching consideredhq.com. Plans first, then what you actually get, then the fine print. */
:root{
  --ground:#FFF8EC; --card:#FFFFFF; --ink:#1A1033; --soft:#4A4060; --line:#1A1033;
  --lemon:#FFE14D; --tang:#FF7A3D; --pink:#FF5FA2; --blue:#3D5AFE; --mint:#3DDC97; --lilac:#C9B6FF;
  --todo:#FFF1A8; --todo-ink:#5A4300;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  --hand:"Kalam","Segoe Print","Bradley Hand",cursive;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ground:#15102A; --card:#221A3D; --ink:#FFF4E0; --soft:#CFC6E6; --line:#FFF4E0; --todo:#4A3D00; --todo-ink:#FFE9A0; color-scheme:dark}}
:root[data-theme="dark"]{--ground:#15102A; --card:#221A3D; --ink:#FFF4E0; --soft:#CFC6E6; --line:#FFF4E0; --todo:#4A3D00; --todo-ink:#FFE9A0; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.6}
h1,h2,h3{font-family:var(--display); font-weight:800; letter-spacing:-.025em; line-height:1.05; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration-thickness:2px; text-underline-offset:3px}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}
.wrap{max-width:72rem; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.label{display:inline-block; align-self:flex-start; font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; background:var(--ink); color:var(--ground); padding:.25rem .75rem; border-radius:999px}
.todo{background:var(--todo); color:var(--todo-ink); border:1.5px dashed currentColor; border-radius:6px; padding:0 .3em; font-weight:700; white-space:nowrap}
section{padding-block:3.5rem}

header{border-bottom:3px solid var(--line)}
header .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; padding-block:.75rem}
.wordmark{font-family:var(--display); font-weight:800; font-size:1.5rem; text-decoration:none; letter-spacing:-.03em}
.wordmark span{position:relative; z-index:0; display:inline-block; color:#1A1033; padding:0 .14em}
.wordmark span::before{content:""; position:absolute; inset:.1em -.02em .02em; background:var(--pink); border-radius:.2em; transform:rotate(-2.5deg); z-index:-1}
nav{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.navlink{font-family:var(--display); font-weight:700; font-size:.92rem; text-decoration:none; padding:.4rem .75rem; border-radius:999px; border:2px solid transparent}
.navlink.on{background:var(--lemon); color:#1A1033; border-color:var(--line)}
.navcta{font-family:var(--display); font-weight:800; font-size:.92rem; color:#1A1033; background:var(--pink); text-decoration:none; padding:.45rem 1rem; border-radius:999px; border:2px solid #1A1033; box-shadow:3px 3px 0 #1A1033}

.intro{display:flex; flex-direction:column; gap:1.1rem; padding-block:3.5rem 1.5rem}
.intro h1{font-size:clamp(2.6rem, 7vw, 4.8rem); max-width:50rem}
.hi{position:relative; z-index:0; display:inline-block; white-space:nowrap; color:#1A1033; padding:0 .12em}
.hi::before{content:""; position:absolute; inset:.1em -.06em .02em; background:var(--mint); border-radius:14px; transform:rotate(-2deg); z-index:-1}
.intro p{font-size:1.2rem; color:var(--soft); max-width:42rem}

/* plans */
.plans{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.5rem; align-items:stretch; padding-top:1rem}
.plan{border:3px solid #1A1033; border-radius:24px; padding:1.75rem; display:flex; flex-direction:column; gap:1rem; box-shadow:6px 6px 0 #1A1033; color:#1A1033; min-width:0}
.plan.free{background:#FFFFFF} .plan.pack{background:var(--blue); color:#FFFFFF; transform:translateY(-8px)} .plan.year{background:var(--lilac)}
.fit{font-family:var(--hand); font-size:1.25rem; line-height:1.25; background:var(--lemon); color:#1A1033; border:2px solid #1A1033; border-radius:10px; padding:.2rem .7rem; align-self:flex-start; transform:rotate(-1.5deg)}
.plan h2{font-size:1.5rem}
.price{font-family:var(--display); font-weight:800; font-size:3.2rem; line-height:1}
.price small{display:block; font-family:var(--body); font-weight:600; font-size:.95rem; margin-top:.35rem; opacity:.9}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; font-size:1rem}
.plan li{display:grid; grid-template-columns:1.4rem 1fr; gap:.4rem; align-items:start}
.plan li::before{content:"✓"; font-weight:800}
.per{font-size:.95rem; opacity:.9; border-top:2px dashed currentColor; padding-top:.75rem; margin-top:auto}
.go{align-self:flex-start; font-family:var(--display); font-weight:800; text-decoration:none; padding:.6rem 1.2rem; border-radius:999px; border:2px solid #1A1033; background:var(--pink); color:#1A1033; box-shadow:3px 3px 0 #1A1033}
.when{margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; font-size:1rem; color:var(--soft)}
.when strong{color:var(--ink)}

/* role */
.role{background:var(--tang); color:#1A1033; border-block:3px solid #1A1033}
.role .wrap{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:2.5rem; align-items:center}
.role h2{font-size:clamp(2rem, 4vw, 3rem)}
.role p{font-size:1.15rem}
.examples{display:flex; flex-direction:column; gap:.75rem}
.ex{background:#FFFFFF; border:3px solid #1A1033; border-radius:16px; padding:.9rem 1.1rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; box-shadow:4px 4px 0 #1A1033}
.ex span:last-child{font-family:var(--mono); font-size:.85rem; white-space:nowrap; background:var(--mint); border:2px solid #1A1033; border-radius:999px; padding:.1rem .6rem}
.ex.two span:last-child{background:var(--pink)}

/* file */
.file .wrap{display:flex; flex-direction:column; gap:1.5rem}
.file h2, .redact h2, .table h2, .faq h2{font-size:clamp(2rem, 4vw, 2.8rem)}
.lead{font-size:1.15rem; color:var(--soft); max-width:46rem}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.25rem; counter-reset:s}
.steps li{counter-increment:s; background:var(--card); border:3px solid var(--line); border-radius:20px; padding:1.25rem 1.4rem; display:flex; flex-direction:column; gap:.4rem; min-width:0}
.steps li::before{content:counter(s); font-family:var(--display); font-weight:800; font-size:1.1rem; width:2.1rem; height:2.1rem; display:grid; place-items:center; border-radius:50%; background:var(--mint); color:#1A1033; border:2px solid #1A1033}
.steps li:last-child::before{background:var(--pink)}
.steps strong{font-family:var(--display); font-size:1.2rem; line-height:1.2}
.steps p{font-size:.98rem; color:var(--soft)}
.keep{font-size:1rem; color:var(--soft)}

/* redaction */
.redact{background:var(--blue); color:#FFFFFF; border-block:3px solid #1A1033}
.redact .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.5rem; align-items:center}
.redact .copy{display:flex; flex-direction:column; gap:1rem}
.redact p{font-size:1.1rem}
.redact .label{background:#FFFFFF; color:#1A1033}
.cv{background:#FFFFFF; color:#1A1033; border:3px solid #1A1033; border-radius:18px; padding:1.25rem 1.4rem; box-shadow:8px 8px 0 #1A1033; display:flex; flex-direction:column; gap:.5rem; font-size:.98rem; transform:rotate(1deg)}
.cv .row{display:grid; grid-template-columns:7.5rem 1fr; gap:.5rem}
.cv .k{font-family:var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:#4A4060; padding-top:.2rem}
.bar{background:#1A1033; color:#1A1033; border-radius:4px; user-select:none}
.cv .tag{font-family:var(--hand); font-size:1.1rem; background:var(--lemon); border:2px solid #1A1033; border-radius:8px; padding:0 .5rem; align-self:flex-start; transform:rotate(-2deg)}

/* table */
.tbl{overflow-x:auto; border:3px solid var(--line); border-radius:20px; background:var(--card)}
table{border-collapse:collapse; width:100%; min-width:40rem; font-size:1rem}
th,td{padding:.85rem 1rem; text-align:left; border-bottom:2px solid color-mix(in srgb, var(--line) 18%, transparent); vertical-align:top}
thead th{font-family:var(--display); font-size:1.1rem; border-bottom:3px solid var(--line)}
thead th:nth-child(3){background:var(--blue); color:#FFFFFF}
tbody th{font-weight:600}
tbody tr:last-child th, tbody tr:last-child td{border-bottom:0}
td.no{color:var(--soft)}

/* faq */
.qs{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.25rem}
.q{background:var(--card); border:3px solid var(--line); border-radius:18px; padding:1.25rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; min-width:0}
.q h3{font-size:1.2rem; line-height:1.25}
.q p{color:var(--soft)}

.final{background:var(--lemon); color:#1A1033; border-top:3px solid #1A1033}
.final .wrap{display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between}
.final h2{font-size:clamp(1.8rem, 3.6vw, 2.4rem)}
footer .wrap{padding-block:2rem 3rem; font-size:.9rem; color:var(--soft)}

@media (max-width:900px){
  .plans{grid-template-columns:1fr} .plan.pack{transform:none}
  .role .wrap, .redact .wrap{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .qs{grid-template-columns:1fr}
}
@media (max-width:560px){ .steps{grid-template-columns:1fr} .cv .row{grid-template-columns:1fr; gap:0} section{padding-block:2.5rem} }

/* why page */
.facts2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.25rem}
.hit{background:var(--card); border:3px solid var(--line); border-radius:20px; padding:1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; min-width:0}
.hit .num{font-family:var(--display); font-weight:800; font-size:2.6rem; line-height:1; color:var(--ink)}
.hit .num small{font-family:var(--body); font-size:1rem; font-weight:600; color:var(--soft)}
.hit h3{font-size:1.25rem; line-height:1.2}
.hit p{color:var(--soft); font-size:1rem}
.hit.big{grid-column:1 / -1; background:var(--pink); color:#1A1033; border-color:#1A1033; box-shadow:6px 6px 0 #1A1033}
.hit.big .num,.hit.big p,.hit.big .num small{color:#1A1033}
.band{border-block:3px solid #1A1033; color:#1A1033}
.band.mint{background:var(--mint)} .band.lilac{background:var(--lilac)}
.band .label{background:#1A1033; color:#FFF4E0}
.cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.5rem; align-items:start}
.cols > div{display:flex; flex-direction:column; gap:1rem; min-width:0}
.list{margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.6rem; font-size:1.05rem}
.card2{background:#FFFFFF; border:3px solid #1A1033; border-radius:18px; padding:1.25rem 1.4rem; box-shadow:5px 5px 0 #1A1033; display:flex; flex-direction:column; gap:.5rem}
.card2 p{color:#2E2547}
.srcs{font-size:.9rem; color:var(--soft); display:flex; flex-direction:column; gap:.3rem}
.srcs a{word-break:break-word}
@media (max-width:900px){ .facts2, .cols{grid-template-columns:1fr} }

/* phone menu: one swipeable row */
@media (max-width:700px){
  header nav{flex-wrap:nowrap; overflow-x:auto; width:100%; scrollbar-width:none; padding-bottom:2px}
  header nav::-webkit-scrollbar{display:none}
  .navlink{white-space:nowrap; border-color:var(--line)}
  .navcta{white-space:nowrap}
}

/* phone: calmer */
@media (max-width:600px){
  .navlink, .navlink.on{border-color:transparent; padding:.35rem .5rem; font-size:.88rem}
  .navlink.on{background:var(--lemon)}
  .navcta{font-size:.82rem; padding:.35rem .8rem; box-shadow:2px 2px 0 #1A1033}
  .intro{padding-block:2rem 1rem; gap:.8rem}
  .intro h1{font-size:2.4rem}
  .intro p{font-size:1.05rem}
  .plan, .box, .screen, .cv, .tcard, .card2, .hit.big, .ex, .need, .jump a{box-shadow:3px 3px 0 #1A1033}
  .plan.pack, .cv, .fit, .step .why, .cv .tag{transform:none}
  .step{padding-block:2rem}
}

/* footer guide links */
.footguides{display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-bottom:.6rem}