/* Assess Plan Do Review — Bento theme
   Loaded after site.css. Everything sits in rounded tiles on a tight 12-column grid,
   with soft muted tints and small illustrations. */
:root {
  --bg:#eef1f4; --surface:#ffffff; --alt:#ffffff;
  --tile-r:22px; --gap:14px;
  --sky:#e4eef3; --sage:#e5efe8; --sand:#f5eee2; --lilac:#ecebf6;
  --sky-ink:#0f5e74; --sage-ink:#2b7d5d; --sand-ink:#a26a17; --lilac-ink:#5b5f97;
  --dark:#16232f; --dark-2:#1d2d3b; --dark-ink:#e9eff4; --dark-muted:#a9b8c6;
}
@media (prefers-color-scheme: dark) { :root {
  --bg:#0c1218; --surface:#151f29; --alt:#151f29;
  --sky:#16303b; --sage:#173229; --sand:#2f2617; --lilac:#24253c;
  --sky-ink:#7cc2d6; --sage-ink:#6cc9a3; --sand-ink:#e3ac5c; --lilac-ink:#aeb1e6;
  --dark:#0a1016; --dark-2:#121c26;
} }

body { background:var(--bg); }
.wrap { max-width:1200px; padding:0 18px; }

/* ---------- header: a floating rounded bar ---------- */
header.site { background:transparent; border:0; padding:12px 0 0; backdrop-filter:none; -webkit-backdrop-filter:none; }
header.site .wrap { background:rgba(255,255,255,.9); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border:1px solid var(--line); border-radius:18px; padding:10px 12px 10px 18px; box-shadow:0 4px 18px rgba(20,33,46,.06); max-width:1164px; }
@media (prefers-color-scheme: dark) { header.site { background:transparent; } header.site .wrap { background:rgba(21,31,41,.9); } }
header.site nav a { margin-left:18px; }
header.site nav a.signin, header.site nav a.cta { border-radius:12px; }
.banner { background:transparent; border:0; padding:12px 0 0; }
.banner .wrap > * { vertical-align:middle; }
.banner .wrap { background:var(--sky); border-radius:14px; padding:10px 18px; max-width:1164px; }

/* ---------- the grid ---------- */
.bento { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); margin:var(--gap) 0 0; grid-auto-flow:dense; }
main .bento:first-child { margin-top:18px; }
.bento > section, .bento + .bento { margin-top:var(--gap); }
section.bento { padding:0; scroll-margin-top:90px; }
.s-3 { grid-column:span 3; } .s-4 { grid-column:span 4; } .s-5 { grid-column:span 5; } .s-6 { grid-column:span 6; }
.s-7 { grid-column:span 7; } .s-8 { grid-column:span 8; } .s-12 { grid-column:span 12; }
.r-2 { grid-row:span 2; }

.tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--tile-r); padding:26px; margin:0; position:relative; min-width:0; overflow:hidden; box-shadow:none; }
.tile > :first-child { margin-top:0; }
.tile > :last-child { margin-bottom:0; }
.tint-sky { background:var(--sky); border-color:transparent; }
.tint-sage { background:var(--sage); border-color:transparent; }
.tint-sand { background:var(--sand); border-color:transparent; }
.tint-lilac { background:var(--lilac); border-color:transparent; }
.t-dark { background:var(--dark); border-color:transparent; color:var(--dark-ink); }
.t-dark h2, .t-dark h3 { color:#fff; }
.t-dark .sub, .t-dark .muted, .t-dark .note { color:var(--dark-muted); }
.t-dark a:not(.btn) { color:#fff; }
.t-dark .eyebrow { color:#8fd0e2; }
.t-dark .btn { background:#fff; color:var(--dark); border-color:#fff; }
.t-dark .btn:hover { background:#e6edf3; border-color:#e6edf3; color:var(--dark); }
.t-dark .btn.alt { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.t-dark .btn.alt:hover { border-color:#fff; color:#fff; background:transparent; }

.eyebrow { font-size:.74rem; margin-bottom:10px; }
.bento h2 { font-size:clamp(1.45rem,2.4vw,1.9rem); line-height:1.18; margin:0 0 10px; letter-spacing:-.02em; }
.bento .sub { margin:0; font-size:1rem; max-width:60ch; }
.tile-h { margin:0 0 14px; font-size:1.08rem; }
.btn { border-radius:12px; }
.t-head { display:flex; flex-direction:column; justify-content:flex-start; }
.t-split { flex-direction:row; align-items:flex-end; justify-content:space-between; gap:24px; padding:24px 26px; }
.t-split h2 { margin:0; }
.t-split .sub { max-width:56ch; }
.t-note { color:var(--muted); font-size:.9rem; padding:16px 22px; }

/* ---------- hero ---------- */
.t-hero { padding:44px 42px; display:flex; flex-direction:column; justify-content:center; }
.t-hero h1 { font-size:clamp(2.1rem,4.4vw,3.2rem); line-height:1.08; margin:0 0 16px; letter-spacing:-.03em; text-wrap:balance; }
.t-hero h1 em { font-style:normal; color:var(--accent); }
.t-hero h1 .h1-second { display:block; font-size:.52em; margin-top:12px; letter-spacing:-.01em; font-weight:600; color:var(--muted); }
.t-hero .lede { font-size:1.06rem; line-height:1.65; color:var(--muted); margin:0 0 24px; max-width:58ch; }
.t-hero .actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-bottom:14px; }
.t-hero .actions .btn { margin:0; }
.textlink { font-weight:600; text-decoration:none; margin-left:6px; }
.textlink:hover { text-decoration:underline; }

.t-shot { padding:0; background:var(--sky); border-color:transparent; display:block; text-decoration:none; min-height:340px; }
.t-shot img { position:absolute; left:50%; top:54px; width:86%; height:auto; transform:translateX(-50%) rotate(-2deg); border-radius:10px; box-shadow:0 18px 40px rgba(20,33,46,.18); transition:transform .25s ease; }
.t-shot:hover img { transform:translateX(-50%) rotate(0deg) translateY(-4px); }
.tag { position:absolute; top:16px; left:18px; z-index:1; background:var(--surface); color:var(--ink); font-size:.78rem; font-weight:700; padding:6px 12px; border-radius:999px; border:1px solid var(--line); }

.t-stat { padding:22px 22px 20px; display:flex; flex-direction:column; justify-content:flex-end; min-height:168px; }
.t-stat strong { display:block; font-size:2.1rem; line-height:1.05; letter-spacing:-.03em; color:var(--ink); }
.t-stat span { color:var(--muted); font-size:.9rem; line-height:1.35; margin-top:4px; }
.ill { display:block; margin-bottom:auto; height:40px; width:auto; }
.tint-sky .ill rect, .tint-sky .ill circle { fill:var(--sky-ink); }
.tint-sky .ill rect:nth-child(odd) { opacity:.55; }
.tint-sage .ill circle { fill:none; stroke-width:8; stroke-dasharray:20 68; }
.tint-sage .ill .q1 { stroke:var(--sage-ink); stroke-dashoffset:0; }
.tint-sage .ill .q2 { stroke:var(--sky-ink); stroke-dashoffset:-22; }
.tint-sage .ill .q3 { stroke:var(--sand-ink); stroke-dashoffset:-44; }
.tint-sage .ill .q4 { stroke:var(--lilac-ink); stroke-dashoffset:-66; }
.tint-sand .ill circle { fill:var(--sand-ink); }
.tint-sand .ill .line { stroke:var(--sand-ink); stroke-width:2; opacity:.5; }
.tint-lilac .ill .pg { fill:var(--surface); stroke:var(--lilac-ink); stroke-width:2; }
.tint-lilac .ill .line { stroke:var(--lilac-ink); stroke-width:2.5; stroke-linecap:round; }

.t-trust { list-style:none; display:flex; flex-wrap:wrap; gap:8px 28px; padding:16px 24px; color:var(--muted); font-size:.92rem; }
.t-trust li::before { content:"\2713"; color:var(--green); font-weight:700; margin-right:8px; }

/* ---------- how it works ---------- */
.t-dark.t-head { padding:32px; }
.ring { width:120px; height:120px; margin-top:auto; align-self:flex-end; }
.ring path { fill:none; stroke-width:9; stroke-linecap:round; }
.ring .a1 { stroke:#f2a93b; } .ring .a2 { stroke:#74bcd8; } .ring .a3 { stroke:#58c49b; } .ring .a4 { stroke:#b79cf0; }
.t-step { padding:22px; }
.t-step h3 { margin:12px 0 6px; font-size:1.08rem; }
.t-step p { margin:0; color:var(--muted); font-size:.93rem; }
.num { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px; font-weight:700; font-size:.82rem; }
.n1 { background:var(--sand); color:var(--sand-ink); } .n2 { background:var(--sky); color:var(--sky-ink); }
.n3 { background:var(--sage); color:var(--sage-ink); } .n4 { background:var(--lilac); color:var(--lilac-ink); }
.bento ol.steps { background:transparent; border:0; border-radius:0; margin:0; }
.bento ol.steps li { padding:14px 0 14px 50px; }
.bento ol.steps li::before { left:0; top:13px; border-radius:10px; }
.t-figure { display:grid; grid-template-columns:44% 1fr; gap:20px; align-items:center; }
.t-figure img { width:100%; height:auto; border-radius:10px; box-shadow:0 10px 26px rgba(20,33,46,.14); background:#fff; }
.t-figure h3 { margin:0 0 8px; font-size:1.05rem; }
.t-figure p { color:var(--muted); font-size:.92rem; margin:0 0 14px; }

/* ---------- features ---------- */
.feat-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); }
.feat-grid .card { grid-column:span 3; border-radius:var(--tile-r); padding:22px; border:1px solid var(--line); background:var(--surface); }
.feat-grid .card:hover { box-shadow:none; border-color:var(--line-strong); }
.feat-grid .card:nth-child(1), .feat-grid .card:nth-child(2) { grid-column:span 6; padding:28px; }
.feat-grid .card:nth-child(1) { background:var(--sky); border-color:transparent; }
.feat-grid .card:nth-child(2) { background:var(--sage); border-color:transparent; }
.feat-grid .card:nth-child(1) h3, .feat-grid .card:nth-child(2) h3 { font-size:1.2rem; }
.feat-grid .card:nth-child(1) p, .feat-grid .card:nth-child(2) p { font-size:.98rem; color:var(--ink); opacity:.8; }
.feat-grid .card .ic { border-radius:12px; width:38px; height:38px; }
.feat-grid .card:nth-child(4n+3) .ic { background:var(--sand); color:var(--sand-ink); }
.feat-grid .card:nth-child(4n+4) .ic { background:var(--sage); color:var(--sage-ink); }
.feat-grid .card:nth-child(4n+5) .ic { background:var(--lilac); color:var(--lilac-ink); }
.feat-grid .card:nth-child(1) .ic, .feat-grid .card:nth-child(2) .ic { background:var(--surface); }

/* ---------- privacy ---------- */
#privacy .t-dark { padding:34px; }
#privacy .big { font-size:1.3rem; line-height:1.4; font-weight:700; color:#fff; margin:6px 0 12px; max-width:40ch; }
.t-lock { display:flex; flex-direction:column; gap:14px; }
.lock { height:56px; }
.lock .body { fill:var(--sage-ink); }
.lock .shackle { fill:none; stroke:var(--sage-ink); stroke-width:6; stroke-linecap:round; }
.lock .hole { fill:var(--sage); }
.checks { list-style:none; padding:0; margin:0; }
.checks li { padding:4px 0 4px 24px; position:relative; color:var(--ink); }
.checks li::before { content:"\2713"; position:absolute; left:0; color:var(--sage-ink); font-weight:700; }
.t-lock a { font-weight:600; margin-top:auto; }

/* ---------- licensing ---------- */
.bento .prices { grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--gap); margin:0; }
.bento .price { border-radius:var(--tile-r); padding:22px; }
.bento .price.feat { border:2px solid var(--accent); box-shadow:none; background:var(--sky); }
.bento .price .incl { border-top-color:rgba(0,0,0,.08); }
.bento .tier { border-radius:var(--tile-r); }
.bento .tier ul { border-top-color:rgba(0,0,0,.08); }
.t-table { padding:22px; }
.t-table .cmp-wrap { border-radius:14px; }
.t-signin { display:flex; flex-direction:column; gap:4px; }
.t-signin .btn { width:100%; text-align:center; }
.t-signin p { margin:0 0 8px; }
.t-signin .note { font-size:.84rem; }

/* ---------- savings ---------- */
.bento .calc { display:grid; grid-template-columns:5fr 7fr; gap:var(--gap); background:transparent; border:0; box-shadow:none; overflow:visible; border-radius:0; }
.bento .calc-in { border:0; border-radius:var(--tile-r); padding:24px; }
.bento .calc-in input, .bento .calc-in select { background:var(--surface); border-radius:10px; }
.bento .calc-out { padding:0; display:flex; flex-direction:column; gap:var(--gap); }
.bento .kpis { gap:var(--gap); margin:0; }
.bento .kpi { border-radius:18px; padding:18px; }
.bento .kpi .v { font-size:1.7rem; }
.t-chart { padding:20px; flex:1; }

/* ---------- FAQ ---------- */
.faq-list { padding:10px 26px; }
.faq-list details { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:14px 0; margin:0; }
.faq-list details:last-child { border-bottom:0; }

/* ---------- contact ---------- */
.t-contact-intro { padding:34px; }
.t-contact-intro .alt-contact { margin:auto 0 12px; color:var(--dark-muted); padding-top:24px; }
.bento .contact { max-width:none; margin:0; box-shadow:none; padding:28px; text-align:left; border-radius:var(--tile-r); }
.bento .contact input, .bento .contact select, .bento .contact textarea { border-radius:10px; }
.bento .contact button { border-radius:12px; }

/* ---------- footer ---------- */
footer.site { background:transparent; border:0; padding:var(--gap) 0 28px; margin-top:var(--gap); }
.bento.foot { margin:0; }
.foot .tile { padding:18px 22px; font-size:.86rem; color:var(--faint); }
.foot .tile p { margin:0; }

/* ---------- other pages on the same theme ---------- */
.block { background:var(--surface); border:1px solid var(--line); border-radius:var(--tile-r); padding:32px; margin:18px 0; }
.stage { border-radius:var(--tile-r); }
.thumbs button { border-radius:12px; }

/* ---------- responsive ---------- */
@media (max-width:1000px) {
  .s-3 { grid-column:span 6; } .s-4, .s-5, .s-7, .s-8 { grid-column:span 12; } .s-6 { grid-column:span 12; }
  .r-2 { grid-row:auto; }
  .t-shot { min-height:420px; }
  .feat-grid .card { grid-column:span 6; }
  .feat-grid .card:nth-child(1), .feat-grid .card:nth-child(2) { grid-column:span 12; }
  .bento .prices { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .bento .calc { grid-template-columns:1fr; }
  #how .t-step { grid-column:span 6; }
}
@media (max-width:640px) {
  :root { --gap:10px; --tile-r:18px; }
  .wrap { padding:0 12px; }
  .tile { padding:20px; }
  .t-hero { padding:28px 22px; }
  .s-3, #how .t-step, .feat-grid .card { grid-column:span 12; }
  .t-stat { min-height:0; grid-column:span 6; }
  .t-split { flex-direction:column; align-items:flex-start; gap:8px; }
  .t-figure { grid-template-columns:1fr; }
  .bento .prices { grid-template-columns:1fr 1fr; }
  .bento .kpis { grid-template-columns:1fr; }
  .t-shot { min-height:360px; }
  .ring { display:none; }
  .block { padding:22px; }
  header.site .wrap { border-radius:14px; }
}

/* ---------- refinements ---------- */
.ill { align-self:flex-start; }
.lock { align-self:flex-start; }
#faq .faq-list details, #faq .faq-list details:first-of-type, #faq .faq-list details:last-of-type { border:0; border-bottom:1px solid var(--line); border-radius:0; max-width:none; background:transparent; }
#faq .faq-list details:last-of-type { border-bottom:0; }
#faq .faq-list summary { padding:18px 40px 18px 0; }
#faq .faq-list summary::after { right:4px; }
#faq .faq-list details p { padding:0 0 18px; }
.t-signin { justify-content:flex-start; }
.t-path { display:flex; flex-direction:column; gap:12px; }
.t-path h3 { margin:0 0 4px; font-size:1.02rem; }
.path { list-style:none; padding:0; margin:0; counter-reset:p; }
.path li { counter-increment:p; position:relative; padding:0 0 16px 46px; }
.path li:last-child { padding-bottom:0; }
.path li::before { content:counter(p); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:10px; background:var(--surface); color:var(--sky-ink); font-weight:700; font-size:.85rem; display:grid; place-items:center; }
.path li:not(:last-child)::after { content:""; position:absolute; left:15px; top:36px; bottom:4px; width:2px; background:rgba(15,94,116,.2); }
.path b { display:block; color:var(--ink); }
.path span { color:var(--muted); font-size:.9rem; }
.t-path .note { font-size:.84rem; margin-top:auto; }
.next-steps { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px; }
.next-steps li { background:var(--dark-2); border-radius:14px; padding:12px 14px 12px 46px; position:relative; color:var(--dark-ink); font-size:.94rem; }
.next-steps li::before { content:"\2713"; position:absolute; left:16px; top:12px; color:#58c49b; font-weight:700; }
.t-contact-intro .alt-contact { margin:auto 0 12px; padding-top:22px; }

/* privacy and other text pages: the document sits in one large tile */
main > .wrap.pad { background:var(--surface); border:1px solid var(--line); border-radius:var(--tile-r); padding:36px 40px; margin-top:18px; margin-bottom:18px; max-width:1164px; }
main > .wrap.pad h2 { scroll-margin-top:100px; }
main > .wrap.pad table { border-radius:14px; overflow:hidden; }
@media (max-width:640px) { main > .wrap.pad { padding:22px 18px; margin-left:12px; margin-right:12px; } }