/* ==========================================================================
   WEBSITE + SEO  —  page-templates/website-seo.php

   Rebuilt 9 September 2026 (flagship redesign, page 3). The page is the
   Website page's sibling: the same finished website in the hero, with the
   months of SEO work beneath it instead of the "kept" line; then the
   searches people type, the monthly cycle told as product UI, the honest
   section on a dark band, the two terms drawn side by side, the shared
   two-product component, questions and the ask.

   Same furniture as the rest of the site: hairline rules rather than
   boxes, the display face for figures, one orange accent reserved for the
   thing being sold, white cards only where something is a picture of the
   product. The site mock (.sm) and the two-product component (.tp) are
   shared styles in primestart.css and are not restyled here.

   Every scene has a finished state that shows without JavaScript
   (:not(.is-live)) and under reduced motion.
   ========================================================================== */

/* ---------- 1. Hero ----------
   The page took the standard hero on 9 September 2026 and sets nothing about
   it here, at any width. The "worked" scene below moved out of the hero into
   its own section (#the-months) at full page width - whole, because
   website-seo.js drives the browser window and the six months together, and
   a split scene animates half of itself. */

/* The worked-on website: the site mock, the chip that names each month's
   work, and the line of months beneath. */
.wk{position:relative}
.wk-frame{position:relative}
.wk-sm .sm-hero{height:186px}
.wk-sm .sm-link + .sm-link + .sm-link + .sm-link{display:none}

/* month two rewrites the headline; month three adds Wakefield */
.wk [data-f="h"]{transition:opacity .24s var(--ease)}
.wk.h-swap [data-f="h"]{opacity:0}
.wk .sm-pills span:nth-child(4){transition:opacity .45s var(--ease),transform .5s var(--ease-out),border-color .4s var(--ease),color .4s var(--ease),background-color .4s var(--ease)}
.wk.is-live:not(.changed) .sm-pills span:nth-child(4){opacity:0;transform:translateY(4px)}
.wk.changed .sm-pills span:nth-child(4){animation:wkNew 2.2s var(--ease) both}
@keyframes wkNew{0%,55%{border-color:var(--orange);color:var(--orange-dk);background:var(--wash)}100%{border-color:#E6E0D6;color:#2B3B4B;background:#fff}}

.wk-chip{
  position:absolute;left:16px;bottom:-15px;z-index:2;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 32px);
  padding:7px 13px;border-radius:100px;background:var(--white);border:1px solid var(--line);
  font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);
  box-shadow:0 12px 26px -16px rgba(18,33,47,.45);
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .5s var(--ease-out);
}
.wk-chip i{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(217,98,14,.18);flex:none}
.wk-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .16s var(--ease)}
.wk-chip.swap span{opacity:0}
.wk:not(.is-live) .wk-chip,.wk-chip.on{opacity:1;transform:none}

.wk-months{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 10px;position:relative}
.wk-months::before,.wk-months::after{content:"";position:absolute;left:8px;right:calc(16.666% - 8px);top:7px;height:2px;border-radius:2px}
.wk-months::before{background:var(--line)}
.wk-months::after{background:var(--orange);transform:scaleX(var(--p,1));transform-origin:0 50%;transition:transform .7s var(--ease-io)}
.wk-m{position:relative;padding-top:24px;min-width:0}
.wk-dot{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--line);transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.wk-m b{display:block;font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:-0.02em;line-height:1.3;color:#9AA5AF;transition:color .35s var(--ease)}
.wk-m em{display:block;font-style:normal;font-size:11.8px;line-height:1.4;color:#B3BBC3;margin-top:3px;transition:color .35s var(--ease)}
.wk:not(.is-live) .wk-dot,.wk-m.on .wk-dot{background:var(--orange);border-color:var(--orange)}
.wk:not(.is-live) .wk-m b,.wk-m.on b{color:var(--ink)}
.wk:not(.is-live) .wk-m em,.wk-m.on em{color:var(--muted)}
.wk:not(.is-live) .wk-on b,.wk-on.on b{color:var(--orange-dk)}
.wk:not(.is-live) .wk-on .wk-dot,.wk-on.on .wk-dot{transform:scale(1.18);box-shadow:0 0 0 4px var(--wash)}
.wk-note{margin:14px 0 0;font-size:12.5px;color:var(--muted)}

/* ---------- 2. Why it matters: the searches people type ---------- */
.wseo-why-grid{display:grid;grid-template-columns:1fr .92fr;gap:72px;align-items:center}
.wseo-why-copy h2{margin:8px 0 0;max-width:18ch}
.wseo-why-copy .lede{margin:18px 0 0;max-width:54ch}
.wseo-choice{margin:28px 0 0;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:10px}
.wseo-choice p{margin:0;font-size:16.5px;line-height:1.55;color:var(--muted)}
.wseo-choice b{color:var(--ink)}

.wseo-why-art{position:relative}
.srch{
  display:flex;align-items:center;gap:12px;height:64px;padding:0 22px;border-radius:100px;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 24px 50px -30px rgba(18,33,47,.35),0 1px 2px rgba(18,33,47,.04);
  font-family:var(--fh);font-size:20px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);
}
.srch-ico{color:var(--muted);flex:none}
.srch-text{white-space:nowrap;overflow:hidden;min-width:0}
.srch-caret{width:2px;height:24px;background:var(--orange);border-radius:1px;flex:none;animation:srchBlink 1s steps(2,start) infinite}
@keyframes srchBlink{to{visibility:hidden}}
.srch-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.srch-list li{font-size:14px;line-height:1;padding:9px 13px;border-radius:100px;border:1px solid var(--line);background:var(--white);color:var(--muted);transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease)}
.srch-list li.on{color:var(--ink);border-color:var(--orange);background:var(--wash)}
.wseo-why-note{margin:18px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}

/* ---------- 3. The monthly cycle ---------- */
.wseo-cycle-head{max-width:46rem;margin:0 0 44px}
.wseo-cycle-head h2{margin:8px 0 0;max-width:18ch}
.wseo-cycle-head .lede{margin:16px 0 0;max-width:60ch}

.cyc{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);column-gap:64px;align-items:start;position:relative}
.cyc-step{
  grid-column:1;position:relative;display:grid;grid-template-columns:34px 1fr;column-gap:16px;row-gap:4px;align-items:start;
  text-align:left;padding:16px 0 18px;margin:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;border-radius:6px;
}
.cyc-step::before{content:"";position:absolute;left:16px;top:0;bottom:0;width:2px;background:var(--line);transition:background-color .4s var(--ease)}
.cyc-step:first-child{padding-top:0}
.cyc-step.done::before{background:var(--orange)}
.cyc-step:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

.cyc-n{
  grid-row:1/3;position:relative;z-index:1;width:34px;height:34px;border-radius:50%;border:2px solid var(--line);background:var(--paper);
  display:grid;place-items:center;font-family:var(--fh);font-size:14px;font-weight:800;font-style:normal;color:#9AA5AF;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
}
.cyc-n span,.cyc-n .cyc-tick{grid-area:1/1;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.cyc-n .cyc-tick{opacity:0;transform:scale(.6);color:#fff}
.cyc-step.done .cyc-n{background:var(--orange);border-color:var(--orange);color:#fff}
.cyc-step.done .cyc-n span{opacity:0}
.cyc-step.done .cyc-n .cyc-tick{opacity:1;transform:none}
.cyc-step.on .cyc-n{border-color:var(--orange);color:var(--orange-dk);background:var(--wash);box-shadow:0 0 0 4px var(--wash)}
.cyc-step.on.done .cyc-n{background:var(--orange);color:#fff}

.cyc-step b{font-family:var(--fh);font-size:18px;font-weight:700;letter-spacing:-0.025em;line-height:1.25;color:var(--muted);transition:color .3s var(--ease)}
.cyc-step .cyc-s{font-size:15px;line-height:1.55;color:#7F8D9A;max-width:44ch;transition:color .3s var(--ease)}
.cyc-step.on b,.cyc-step.done b,.cyc-step:hover b,.cyc:not(.is-live) .cyc-step b{color:var(--ink)}
.cyc-step.on .cyc-s,.cyc-step.done .cyc-s,.cyc:not(.is-live) .cyc-step .cyc-s{color:var(--muted)}
.cyc-step.on b{color:var(--orange-dk)}

.cyc-repeat{grid-column:1;display:flex;align-items:center;gap:16px;padding:16px 0 0;position:relative}
.cyc-repeat::before{content:"";position:absolute;left:16px;top:0;height:16px;width:2px;background:var(--orange)}
.cyc-repeat .cyc-n{color:var(--orange-dk);border-color:var(--orange);background:var(--wash)}
.cyc-repeat .cyc-n svg{transform:rotate(90deg)}
.cyc-repeat span{font-family:var(--fh);font-size:14.5px;font-weight:700;letter-spacing:-0.01em;color:var(--orange-dk)}

.cyc-panel{
  grid-column:2;grid-row:1 / span 6;align-self:start;position:sticky;top:calc(var(--hdr) + 28px);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .5s var(--ease-out),visibility 0s linear .45s;
}
.cyc-panel.on{opacity:1;visibility:visible;transform:none;z-index:1;transition:opacity .45s var(--ease),transform .5s var(--ease-out),visibility 0s}
.cyc:not(.is-live) .cyc-panel:last-of-type{opacity:1;visibility:visible;transform:none}

/* The pictures: product UI in the site's own language. */
.ui{
  background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  box-shadow:0 34px 70px -40px rgba(18,33,47,.45),0 2px 6px rgba(18,33,47,.05);
  font-family:var(--fb);color:var(--ink-2);
}
.ui + .ui{margin-top:14px}
.ui-t{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.ui-t > span{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ui-badge{font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.02em;font-style:normal;color:var(--orange-dk);background:var(--wash);border:1px solid rgba(217,98,14,.25);border-radius:100px;padding:4px 10px;white-space:nowrap}
.ui-badge-new{color:#fff;background:var(--orange);border-color:var(--orange)}
.ui-field{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--paper);font-family:var(--fh);font-size:15px;font-weight:600;color:var(--ink);margin:0 0 14px}
.ui-field svg{color:var(--muted);flex:none}
.ui-rows{list-style:none;margin:0;padding:0}
.ui-rows li{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line-2);font-size:14.5px;line-height:1.4}
.ui-rows li:first-child{border-top:0}
.ui-rows svg{color:var(--orange-dk)}
.ui-rows b{font-weight:600;color:var(--ink)}
.ui-rows span{font-size:13px;color:var(--muted);white-space:nowrap}
.ui-rows-plain li{grid-template-columns:18px 1fr}
.ui-foot{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.ui-k{margin:14px 0 6px;font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-dk)}
.ui-line{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ui-line b{color:var(--ink);font-weight:700}
.ui-diff{display:grid;gap:4px;padding:12px 0;border-top:1px solid var(--line-2)}
.ui-t + .ui-diff{border-top:0;padding-top:0}
.ui-diff small{font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ui-diff del{font-size:13.5px;color:#9AA5AF;text-decoration:line-through;text-decoration-color:rgba(154,165,175,.7)}
.ui-diff ins{font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;position:relative;padding-left:14px;line-height:1.4}
.ui-diff ins::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.ui-diff + .ui-rows{margin-top:6px;border-top:1px solid var(--line-2);padding-top:4px}
.ui-bars{display:grid;gap:8px;margin:12px 0 0}
.ui-bars i{display:block;height:8px;border-radius:4px;background:var(--line-2);position:relative;overflow:hidden}
.ui-bars i::after{content:"";position:absolute;inset:0;width:var(--uw,60%);border-radius:4px;background:linear-gradient(90deg,var(--orange),var(--amber))}
.ui-page{margin:12px 0 0;padding:14px 16px;border-radius:10px;border:1px solid var(--line);background:var(--paper);display:grid;gap:7px}
.ui-page b{font-family:var(--fh);font-size:14px;color:var(--ink)}
.ui-page i{display:block;height:6px;border-radius:3px;background:var(--line);width:var(--uw,100%)}
.ui-page span{justify-self:start;margin-top:4px;font-family:var(--fh);font-size:11.5px;font-weight:700;color:#fff;background:var(--ink);border-radius:5px;padding:5px 10px}
.ui-biz{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:12px 14px;border-radius:10px;background:var(--paper);border:1px solid var(--line)}
.ui-biz svg{color:var(--orange-dk);flex:none}
.ui-biz b{display:block;font-family:var(--fh);font-size:15px;color:var(--ink)}
.ui-biz span{font-size:13px;color:var(--muted)}
.ui-actions{display:flex;align-items:center;gap:10px;margin:16px 0 0;flex-wrap:wrap}
.ui-btn{font-family:var(--fh);font-size:13px;font-weight:700;color:#fff;background:var(--orange);border-radius:8px;padding:9px 14px}
.ui-btn-ghost{color:var(--ink);background:transparent;border:1px solid var(--line)}
.ui-actions em{font-style:normal;font-size:13px;color:var(--muted);margin-left:auto}

.wseo-cycle-note{margin:48px 0 0;max-width:74ch;font-size:16.5px;line-height:1.6;color:var(--muted)}
.wseo-cycle-eg{display:block;margin-top:8px;font-size:13.5px;color:var(--muted)}

/* ---------- 4. Straight about it (dark) ---------- */
.wseo-honest-head{max-width:48rem;margin:0 0 40px}
.wseo-honest-head h2{margin:8px 0 0;max-width:20ch}
.wseo-honest-head .lede{margin:16px 0 0;max-width:62ch}
.wseo-honest{display:grid;grid-template-columns:repeat(2,1fr);gap:48px}
.wseo-honest-col{border-top:2px solid var(--amber);padding-top:22px}
.wseo-honest-col.is-no{border-top-color:rgba(255,255,255,.18)}
.wseo-honest-col h3{margin:0;font-size:19px;letter-spacing:-0.03em;color:#fff}
.wseo-honest-col ul{list-style:none;margin:16px 0 0;padding:0}
.wseo-honest-col li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--on-dark-2);padding:11px 0;border-top:1px solid rgba(255,255,255,.12)}
.wseo-honest-col li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.wseo-honest-col .tick{flex:0 0 auto;margin-top:4px;color:var(--amber)}
.wseo-honest-col .cross{flex:0 0 auto;width:17px;height:17px;margin-top:4px;color:var(--on-dark-faint)}
.wseo-honest-more{margin:36px 0 0;font-size:15.5px;line-height:1.6;color:var(--on-dark-muted)}
.wseo-honest-more a{color:#fff}

/* ---------- 5. What you are agreeing to: the two terms, drawn ---------- */
.wseo-terms-head{max-width:48rem;margin:0 0 40px}
.wseo-terms-head h2{margin:8px 0 0;max-width:20ch}
.wseo-terms-head .lede{margin:16px 0 0;max-width:60ch}

.tb{--n:18;display:grid;gap:22px;padding:30px 32px 24px;border:1px solid var(--line);border-radius:18px;background:var(--white);box-shadow:0 30px 60px -40px rgba(18,33,47,.35)}
.tb-row{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;padding-bottom:54px}
.tb-k b{display:block;font-family:var(--fh);font-size:17px;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.tb-k span{font-size:13.5px;color:var(--muted)}
.tb-track{position:relative;height:16px;border-radius:8px;background:var(--line-2)}
.tb-bar{position:absolute;top:0;bottom:0;left:calc(var(--from,0) / var(--n) * 100%);width:calc((var(--to) - var(--from,0)) / var(--n) * 100%);border-radius:8px;transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease-io)}
.tb-bar-web{background:var(--ink)}
.tb-bar-seo{background:linear-gradient(90deg,var(--orange),var(--amber))}
.tb-bar-opt{background:repeating-linear-gradient(90deg,rgba(217,98,14,.3) 0 8px,transparent 8px 14px);border-radius:0 8px 8px 0;transition-delay:.55s}
.tb.grow .tb-bar,.tb:not(.is-live) .tb-bar{transform:none}
.tb-mark{position:absolute;top:26px;left:calc(var(--at) / var(--n) * 100%);transform:translateX(-50%);width:max-content;max-width:260px;text-align:center;opacity:0;transition:opacity .4s var(--ease) .1s}
.tb-mark::before{content:"";position:absolute;left:50%;top:-12px;width:2px;height:9px;background:var(--line);transform:translateX(-50%)}
.tb-mark b{display:block;font-family:var(--fh);font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap}
.tb-mark em{display:block;font-style:normal;font-size:12.5px;line-height:1.4;color:var(--muted);max-width:230px;margin:2px auto 0}
.tb-mark-end{left:auto;right:0;transform:none;text-align:right}
.tb-mark-end::before{left:auto;right:0;transform:none}
.tb-mark-end em{margin-right:0}
.tb.marks .tb-mark,.tb:not(.is-live) .tb-mark{opacity:1}
.tb-axis{position:relative;height:16px;margin-left:174px;font-family:var(--fh);font-size:12px;font-weight:700;color:#9AA5AF}
.tb-axis span{position:absolute;left:calc(var(--at) / var(--n) * 100%);transform:translateX(-50%);white-space:nowrap}
.tb-axis span:first-child{transform:none}
.tb-axis span:last-child{transform:translateX(-100%)}

.wseo-terms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;margin:44px 0 0}
.wseo-term{border-top:2px solid var(--line);padding-top:22px}
.wseo-term-k{margin:0;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dk)}
.wseo-term ul{list-style:none;margin:14px 0 18px;padding:0}
.wseo-term li{font-size:15.5px;line-height:1.5;color:var(--ink-2);padding:10px 0;border-top:1px solid var(--line)}
.wseo-term li:first-child{border-top:0;padding-top:0}

.wseo-protect{margin:44px 0 0;padding:28px 32px;border-radius:16px;background:var(--wash);border:1px solid rgba(217,98,14,.22)}
.wseo-protect-k{margin:0 0 8px;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dk)}
.wseo-protect p{margin:0;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:78ch}
.wseo-protect p b{color:var(--ink)}
.wseo-protect .wseo-protect-foot{margin-top:12px;font-size:15px;color:var(--muted)}

/* ---------- 7. Questions ---------- */
.wseo-faq-in{max-width:52rem}
.wseo-faq-head{margin:0 0 28px}
.wseo-faq-head h2{margin:8px 0 0;max-width:22ch}
.wseo-faq-more{margin:26px 0 0}

/* ---------- 8. Final ---------- */
.wseo-final p{max-width:56ch;margin-left:auto;margin-right:auto}

/* ==========================================================================
   NARROW
   ========================================================================== */

@media (max-width:1180px){
  .cyc{column-gap:44px}
  .wseo-why-grid{gap:48px}
}

@media (max-width:1040px){
  .wseo-why-grid{grid-template-columns:1fr;gap:40px;align-items:start}
  .wseo-honest{grid-template-columns:1fr;gap:34px}
  .wseo-terms-grid{grid-template-columns:1fr;gap:30px}
}

@media (max-width:820px){
  /* every step is followed by its own picture; nothing switches */
  .cyc{display:block}
  .cyc-step{display:grid;padding:8px 0 0}
  .cyc-step::before{display:none}
  .cyc-step:first-child{padding-top:0}
  .cyc-step b,.cyc-step .cyc-s{color:var(--ink)}
  .cyc-step .cyc-s,.cyc-step.done .cyc-s,.cyc-step.on .cyc-s{color:var(--muted)}
  .cyc-step.on b{color:var(--ink)}
  .cyc-panel{grid-column:auto;grid-row:auto;opacity:1;visibility:visible;transform:none;margin:14px 0 30px 50px;transition:none}
  .cyc-repeat{padding-top:4px}
  .cyc-repeat::before{display:none}
}

@media (max-width:640px){

  .wk-sm .sm-hero{height:120px;padding:0 14px}
  .wk-sm .sm-hero-copy b{font-size:15px}
  .wk-sm .sm-hero-copy p{display:none}
  .wk-sm .sm-services{display:none}
  .wk-chip{position:static;display:inline-flex;margin:12px 0 0;max-width:100%;font-size:12px}
  .wk-months{margin-top:16px;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px}
  .wk-months::before,.wk-months::after{display:none}
  .wk-m{padding-top:0;padding-left:24px}
  .wk-m b{font-size:13.5px}
  .wk-m em{font-size:12.5px}
  .wk-note{margin-top:12px}

  .wseo-why-copy h2{max-width:none}
  .wseo-choice{margin-top:22px;padding-top:18px}
  .wseo-choice p{font-size:15.5px}
  .srch{height:54px;padding:0 16px;font-size:16px;gap:10px}
  .srch-caret{height:20px}
  .srch-list{margin-top:14px;gap:6px}
  .srch-list li{font-size:13px;padding:8px 11px}

  .wseo-cycle-head{margin-bottom:26px}
  .cyc-step{grid-template-columns:30px 1fr;column-gap:12px}
  .cyc-n{width:30px;height:30px;font-size:13px}
  .cyc-step b{font-size:17px}
  .cyc-step .cyc-s{font-size:14.5px}
  .cyc-panel{margin:12px 0 26px 0}
  .ui{padding:16px 16px;border-radius:12px}
  .ui-t{margin-bottom:12px}
  .ui-field{height:40px;font-size:14px}
  .ui-rows li{font-size:14px;padding:9px 0}
  .ui-line,.ui-diff ins{font-size:14px}
  .wseo-cycle-note{margin-top:30px;font-size:16px}

  .wseo-honest-head{margin-bottom:26px}
  .wseo-honest-more{margin-top:26px}

  .wseo-terms-head{margin-bottom:26px}
  .tb{padding:20px 18px 16px;gap:18px;border-radius:14px}
  .tb-row{grid-template-columns:1fr;gap:10px;padding-bottom:0}
  .tb-k{display:flex;align-items:baseline;gap:10px}
  .tb-k b{font-size:15.5px}
  .tb-k span{font-size:13px}
  /* the bar becomes a 14px band at the top of the track and the marks become
     captions in normal flow beneath it, so each row grows to fit its caption */
  .tb-track{height:auto;background:none;padding-top:14px}
  .tb-track::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;border-radius:8px;background:var(--line-2)}
  .tb-bar{top:0;bottom:auto;height:14px}
  .tb-mark,.tb-mark-end{position:static;transform:none;width:auto;max-width:none;text-align:left;display:block;margin-top:10px}
  .tb-mark::before,.tb-mark-end::before{display:none}
  .tb-mark b{display:inline;margin-right:6px;font-size:13px}
  .tb-mark em{display:inline;max-width:none;margin:0;font-size:13px}
  .tb-axis{margin-left:0;height:14px;font-size:11.5px;margin-top:2px}
  .wseo-terms-grid{margin-top:30px}
  .wseo-term li{font-size:15px}
  .wseo-protect{margin-top:30px;padding:20px 18px;border-radius:12px}
  .wseo-protect p{font-size:16px}

  .wseo-faq-head{margin-bottom:22px}
  .wseo-final .btns .btn{width:100%}
}

@media (max-width:430px){
  .ui-rows li{grid-template-columns:18px 1fr}
  .ui-rows span{grid-column:2;white-space:normal}
  .ui-actions em{margin-left:0;width:100%}
}

@media (max-width:360px){
  .wk-months{grid-template-columns:repeat(2,minmax(0,1fr))}
  .srch{font-size:15px}
}

/* ==========================================================================
   REDUCED MOTION: every scene rests in its finished state (motion.js), and
   nothing here moves on its own.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .srch-caret{animation:none}
  .wk.changed .sm-pills span:nth-child(4){animation:none}
  .wk *,.cyc *,.tb *,.srch-list li{transition:none !important}
}