/* The homepage. Phone first; two columns from 56rem. Ported from the
   approved mockup (canvas "BookDone homepage", 2026-10-03). */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/_app/fonts/jakarta-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/_app/fonts/jakarta-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/_app/fonts/jakarta-vietnamese.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}

:root{
  --accent:#ea580c;
  --accent-ink:#9a3412;
  --accent-soft:#ffedd5;
  --ink:#14160f;
  --ink-soft:#4a4c44;
  --muted:#5f6157;
  --line:#ece8df;
  --bg:#fbf9f4;
  --card:#fff;
  --ok:#146c3e;
  --ok-soft:#dcf3e5;
  --star:#e2a21b;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.home{margin:0;background:var(--bg);color:var(--ink);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:16px;line-height:1.55}
img{max-inline-size:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.03em}
p{margin:0}
.wrap{max-inline-size:72.5rem;margin-inline:auto;padding-inline:1rem}
a:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:6px}

/* Header */
.top{background:var(--card);border-block-end:1px solid var(--line)}
.top-row{display:flex;align-items:center;gap:0.75rem;min-block-size:4rem}
.brand{display:inline-flex;align-items:center;gap:0.6em;font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;text-decoration:none;color:var(--ink)}
.brand .mk{inline-size:28px;block-size:28px;flex:none}
.top .brand{min-block-size:2.75rem}
.top-links{display:none}
.top-cta{margin-inline-start:auto}
/* The Free tools menu (two tools since 2026-10-12): a native disclosure. */
.top-menu{position:relative}
.top-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:0.4rem}
.top-menu summary::-webkit-details-marker{display:none}
.top-menu summary::after{content:"";inline-size:0.4rem;block-size:0.4rem;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.top-menu[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.top-menu summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:6px}
.top-menu-list{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 0.75rem);z-index:20;display:flex;flex-direction:column;min-inline-size:15rem;padding:0.4rem;background:var(--card);border:1px solid var(--line);border-radius:0.875rem;box-shadow:0 14px 34px rgba(20,22,15,0.12)}
.top-menu-list a{padding:0.65rem 0.75rem;border-radius:0.5rem}
.top-menu-list a:hover{background:var(--accent-soft)}
/* The homepage's bar (2026-10-12): its two free products on every screen,
   two of its sections from 56rem. No button: the hero holds both. */
.top-doors{display:flex;align-items:center;gap:0.25rem;margin-inline-start:auto}
.top-doors a{display:inline-flex;align-items:center;min-block-size:2.75rem;padding-inline:0.5rem;font-weight:700;font-size:0.9375rem;text-decoration:none;white-space:nowrap}
.top-doors a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--accent)}
.top-doors .top-sec{display:none}
.sprite{position:absolute;inline-size:0;block-size:0;overflow:hidden}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-block-size:2.75rem;padding:0 1rem;border-radius:999px;font-weight:800;text-decoration:none;font-size:0.875rem;white-space:nowrap}
.btn-main{background:var(--accent);color:#fff}
.btn-ghost{background:var(--card);border:1.5px solid #d9d4c8;color:var(--ink);font-weight:700}
.btn-light{background:#fff;color:var(--accent-ink)}
.btn-big{min-block-size:3.5rem;padding:0 1.75rem;font-size:1.05rem}

/* Hero: two free products, two doors (2026-10-12), each with a hero-sized
   picture: one phone frame, two screens (samples/google_review_mock.mjs). On
   a phone each card is its picture, its words and its button, stacked: the
   first button sits on the first screen, the second by about a screen and a
   quarter. Side by side from 56rem; on a computer the hero fills the first
   screen, as the one-phone hero before it did. */
.hero{display:flex;flex-direction:column;gap:1rem;padding-block:1rem 2.25rem}
.hero-head{display:flex;flex-direction:column;gap:0.5rem}
.pill{align-self:flex-start;padding:0.4rem 0.8rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-weight:800;font-size:0.75rem;letter-spacing:0.06em}
.hero .pill{padding-block:0.3rem}
/* One line on any phone: the headline is 10.45em wide, with a little spare. */
.hero h1{font-size:min(2.125rem,calc((100vw - 2rem) / 10.7));line-height:1.06;letter-spacing:-0.035em}
.home-main h2{text-wrap:balance}
.hl{color:var(--accent)}
.lede{font-size:1.1rem;color:var(--ink-soft)}
.hero .lede{font-size:1rem}
.fine{font-size:0.875rem;color:var(--muted)}
.doors{list-style:none;margin:0;padding:0;display:grid;gap:0.875rem}
/* The button's link covers its whole card, so a tap anywhere on it goes. */
.door{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0.875rem;padding:0.75rem 0.75rem 0.875rem;background:var(--card);border:1px solid var(--line);border-radius:1.25rem;box-shadow:0 10px 28px rgba(20,22,15,0.06)}
/* The picture: the phone rises out of its panel, the panel trims its foot. */
.door-art{position:relative;display:flex;justify-content:center;block-size:clamp(13rem,60vw,15rem)}
/* Stacked on a phone, the picture is cut at its foot: fade it into the card. */
@media (max-width:39.99rem){.door-art{overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}}
.art-phone{flex:none;align-self:flex-start;inline-size:12.25rem;block-size:auto;margin-block-start:1.25rem;transform-origin:50% 100%;filter:drop-shadow(0 14px 18px rgba(59,32,12,0.2)) drop-shadow(0 3px 5px rgba(59,32,12,0.14))}
.door-text{display:flex;flex-direction:column;gap:0.25rem;min-inline-size:0;padding-inline:0.25rem}
.door-for{font-size:0.75rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent-ink)}
.door h2{font-size:1.375rem;line-height:1.15;letter-spacing:-0.025em;text-wrap:balance}
.door-text p:last-child{font-size:0.9375rem;line-height:1.4;color:var(--ink-soft)}
.door-go{min-block-size:3rem;font-size:1rem}
.door-go::after{content:"";position:absolute;inset:0;z-index:1;border-radius:1.25rem}
/* Keyboard focus: the button keeps its pill shape inside its ring. */
.door-go:focus-visible{border-radius:999px}
/* The free QR code: what a customer sees once they scan it, the Google
   review sheet, with the scanned QR on a card by the phone. */
/* Each card is one colour from edge to edge (operator, 2026-10-12); the
   picture sits on it with no panel of its own. */
.door-qr{background:radial-gradient(90% 70% at 20% 85%,rgba(255,255,255,0.55),rgba(255,255,255,0) 60%),linear-gradient(160deg,#fff3e6,#fcd3ad);border-color:#f6d9bd}
.qr-card{position:absolute;inset-inline-start:calc(50% - 9.75rem);inset-block-end:1.25rem;inline-size:4.75rem;padding:0.375rem;background:#fff;border-radius:0.5rem;box-shadow:0 12px 20px rgba(59,32,12,0.2),0 2px 5px rgba(59,32,12,0.14);transform:rotate(-7deg)}
.qr-card svg{display:block;inline-size:100%;block-size:auto}
/* The free review page: the sample in its shop's colours, as on the QR tool. */
.door-page{background:radial-gradient(90% 70% at 20% 85%,rgba(255,255,255,0.6),rgba(255,255,255,0) 60%),linear-gradient(160deg,#fdeef3,#f6cfdc);border-color:#f3d3de}
.hero-foot{display:flex;flex-direction:column;align-items:center;gap:0.375rem}
.stand-line{display:inline-flex;align-items:center;gap:0.4rem;min-block-size:2.75rem;padding:0 0.875rem;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:0.875rem;font-weight:600;text-decoration:none;color:var(--ink);white-space:nowrap}
.stand-line strong{font-weight:800;color:var(--accent-ink)}
.stand-ic{flex:none;inline-size:1.125rem;block-size:1.125rem;color:var(--accent)}
.stand-go{color:var(--accent-ink);font-weight:800}
@media (hover:hover){
  .door:hover{border-color:#f1c9a6;box-shadow:0 16px 36px rgba(59,32,12,0.11)}
  .door:hover .door-go,.door-go:hover{background:#c2410c}
  .door:hover .art-phone,.door:hover .qr-card{scale:1.03}
  .stand-line:hover{border-color:#f1c9a6;background:#fffaf5}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .door,.door-go,.art-phone,.qr-card,.stand-line{transition:border-color 0.2s,box-shadow 0.2s,background-color 0.2s,scale 0.35s cubic-bezier(0.2,0.7,0.2,1)}
}
.stars{color:var(--star);letter-spacing:2px}
.who{font-size:0.8rem;color:var(--muted)}

/* Bands and sections */
.band{background:var(--card);border-block:1px solid var(--line)}
.band>.wrap,.split{padding-block:2.5rem}
h2{font-size:1.875rem;line-height:1.12}
.steps{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:1rem}
.steps li{display:flex;gap:0.9rem;padding:1.25rem;border:1px solid var(--line);border-radius:1.1rem;background:var(--bg)}
.num{flex:none;inline-size:2.4rem;block-size:2.4rem;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.steps h3,.feature h3{font-size:1.125rem;margin-block-end:0.25rem}
.steps p,.feature p{color:var(--ink-soft)}
.split{display:flex;flex-direction:column;gap:1.75rem}
.features{display:flex;flex-direction:column;gap:1.25rem}
.feature{display:flex;gap:0.9rem}
.ic{flex:none;inline-size:26px;block-size:26px;color:var(--accent);margin-block-start:2px}
.review-card{padding:1.25rem;border-radius:1.4rem;background:var(--card);border:1px solid var(--line);box-shadow:0 20px 50px rgba(20,22,15,0.08);display:flex;flex-direction:column;gap:0.6rem}
.rc-head{display:flex;align-items:center;gap:0.5rem}
.rc-label{font-weight:800;font-size:0.75rem;letter-spacing:0.12em;color:var(--muted)}
.rc-badge{padding:0.15rem 0.5rem;border-radius:999px;background:var(--ok-soft);color:var(--ok);font-size:0.75rem;font-weight:700}
.rc-score{font-size:1.2rem;font-weight:800}
.rc-review{border-block-start:1px solid var(--line);padding-block-start:0.9rem;display:flex;flex-direction:column;gap:0.6rem}
.rc-review img{inline-size:12.5rem;block-size:auto;aspect-ratio:3/2;object-fit:cover;border-radius:0.75rem}

/* The stand: the sample print laid over the blank card in the photo. */
.stand-shot{position:relative;aspect-ratio:4/5;margin-inline:-1rem;overflow:hidden;background:#e9e2d8;container-type:inline-size}
.stand-shot>img{inline-size:100%;block-size:100%}
.stand-print{position:absolute;inset-inline-start:27.04%;inset-block-start:23.63%;inline-size:45.93%;block-size:56.07%;padding:5.5cqw 2.75cqw 0;mix-blend-mode:multiply;display:flex;flex-direction:column;align-items:center;text-align:center;color:#18181b;overflow:hidden}
.stand-name{font-size:4.8cqw;font-weight:800;line-height:1.15}
.stand-stars{display:flex;gap:0.7cqw;margin:1.6cqw auto 2cqw}
.stand-stars svg{inline-size:3.3cqw;block-size:3.3cqw;display:block}
.stand-ask{font-size:3.5cqw;font-weight:800;line-height:1.2;letter-spacing:-0.02em;color:#18181b}
.stand-qr{inline-size:27.5cqw;margin-block-start:2.2cqw}
.stand-qr svg{display:block;inline-size:100%;block-size:auto}
.stand-text{display:flex;flex-direction:column;gap:1rem}
.price{display:flex;align-items:baseline;gap:0.5rem;color:var(--muted)}
.price strong{font-size:2rem;font-weight:800;color:var(--ink)}

/* Closing band */
.closing{padding-block:2.5rem}
.closing-box{padding:2rem 1.5rem;border-radius:1.6rem;background:var(--accent);color:#fff;display:flex;flex-direction:column;gap:1.25rem}

/* Footer */
.foot{background:var(--ink);color:#d7d6cf}
.foot-row{display:flex;flex-direction:column;gap:1.1rem;padding-block:2rem;font-size:0.95rem}
.brand-light{color:#fff}
.foot-links{display:flex;flex-wrap:wrap;gap:0.9rem 1.4rem}
.foot-links a{color:#d7d6cf}

/* On a phone the logo's word and both header links ("Google Review QR" is
   long) don't fit: the word shrinks away, screen readers still read
   "BookDone". Under 360px (old iPhone SE) the links get a little smaller. */
@media (max-width:439px){
  .top:has(.top-doors) .brand{font-size:0;gap:0}
}
@media (max-width:359px){
  .top-doors{gap:0}
  .top-doors a{font-size:0.8125rem;padding-inline:0.375rem}
}

/* A very narrow phone: the hero repeats the header button. The doors' words
   get a little more room, and the stand line drops its arrow to stay on one line. */
@media (max-width:380px){
  .top-cta{display:none}
  .door{gap:0.75rem}
  .door-for{letter-spacing:0.03em}
  .door-text p:last-child{font-size:0.875rem}
  .art-phone{inline-size:11.5rem}
  .qr-card{inline-size:4.25rem;inset-inline-start:calc(50% - 9rem)}
  .stand-line{padding-inline:0.75rem}
  .stand-go{display:none}
}

/* A tablet: the doors stay stacked, each with its picture beside its words
   and button. */
@media (min-width:40rem) and (max-width:55.99rem){
  .hero h1{font-size:2.75rem}
  .door{grid-template-columns:15rem minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;gap:0 1.5rem;padding:1rem 1.5rem 1rem 1rem}
  .door-art{grid-row:1/5;block-size:23rem}
  .art-phone{inline-size:12.75rem;margin-block-start:1.5rem}
  .qr-card{inset-inline-start:0.375rem;inset-block-end:0.75rem}
  .door-text{grid-row:2;grid-column:2}
  .door h2{font-size:1.625rem}
  .door-go{grid-row:3;grid-column:2;justify-self:start;margin-block-start:1rem;padding:0 1.5rem}
}

/* A computer: the mockup's desktop layout. */
@media (min-width:56rem){
  body.home{font-size:17px}
  .wrap{padding-inline:1.5rem}
  .top-row{min-block-size:5rem;gap:2.25rem}
  .brand{font-size:1.22rem}
  .brand .mk{inline-size:29px;block-size:29px}
  .top-links{display:flex;gap:1.9rem;margin-inline-start:auto;font-weight:600}
  .top-links a{text-decoration:none}
  .top-cta{margin-inline-start:0;min-block-size:3rem;padding:0 1.5rem;font-size:1rem}
  .top-doors{gap:1.25rem}
  .top-doors a{font-size:1rem}
  .top-doors .top-sec{display:inline-flex;font-weight:600}
  .lede{font-size:1.3rem;max-inline-size:40ch}
  /* As tall as its content, so a tall window shows no empty bands above
     the headline or below the stand line (operator, 2026-10-12). */
  .hero{gap:1.75rem;padding-block:3rem 3.5rem}
  .hero-head{gap:0.875rem}
  .hero h1{font-size:3.75rem;line-height:1.04}
  .hero .lede{font-size:1.25rem}
  .doors{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem}
  .door{gap:1.125rem;padding:1rem 1rem 1.25rem;border-radius:1.5rem}
  .door-go::after{border-radius:1.5rem}
  .door-art{block-size:17.5rem;border-radius:1rem}
  .art-phone{inline-size:13rem;margin-block-start:1.75rem}
  .qr-card{inline-size:5.25rem;inset-inline-start:calc(50% - 10.5rem);inset-block-end:1.5rem}
  .door-text{gap:0.375rem;padding-inline:0.375rem}
  .door-for{font-size:0.8125rem}
  .door h2{font-size:1.75rem}
  .door-text p:last-child{font-size:1rem}
  .door-go{min-block-size:3.25rem;font-size:1.0625rem}
  .hero-foot{flex-direction:row;justify-content:center;gap:1.25rem}
  .stand-line{font-size:0.9375rem;padding:0 1.125rem;gap:0.5rem}
  .stand-ic{inline-size:1.25rem;block-size:1.25rem}
  .band>.wrap,.split{padding-block:5.5rem}
  h2{font-size:2.6rem;line-height:1.1}
  .steps{flex-direction:row;gap:1.5rem;margin-block-start:2.75rem}
  .steps li{flex:1;flex-direction:column;padding:1.9rem;border-radius:1.25rem}
  .steps h3,.feature h3{font-size:1.3rem}
  .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:center}
  .features{gap:1.75rem}
  .review-card{padding:1.75rem;border-radius:1.75rem}
  .rc-score{font-size:1.4rem}
  .rc-review img{inline-size:15rem}
  .stand-shot{margin-inline:0;border-radius:1.5rem}
  .stand-text .lede{font-size:1.2rem}
  .price strong{font-size:2.5rem}
  .closing{padding-block:6rem}
  .closing-box{flex-direction:row;align-items:center;justify-content:space-between;padding:4rem;border-radius:2rem}
  .closing-box h2{font-size:2.75rem;max-inline-size:18ch}
  .foot-row{flex-direction:row;align-items:center;padding-block:2.75rem}
  .foot-links{margin-inline-start:auto;gap:1.6rem}
}
/* A wide computer: each card a small hero, the whole phone beside its words
   and button; the phone follows the panel's height and stands on its bottom
   edge. */
@media (min-width:72rem){
  .hero h1{font-size:4.5rem}
  .hero .lede{font-size:1.375rem}
  .door{grid-template-columns:14.5rem minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;gap:0 1.5rem;padding:1rem 1.5rem 1rem 1rem}
  .door-art{grid-row:1/5;block-size:27.25rem}
  .art-phone{inline-size:auto;block-size:calc(100% - 1.75rem);margin-block-start:1.75rem}
  .qr-card{inline-size:5.75rem;inset-inline-start:0.625rem;inset-block-end:2rem}
  .door-text{grid-row:2;grid-column:2;gap:0.5rem;padding-inline:0}
  .door-for{font-size:0.875rem}
  .door h2{font-size:2rem;line-height:1.1}
  .door-text p:last-child{font-size:1.0625rem;line-height:1.45}
  .door-go{grid-row:3;grid-column:2;justify-self:stretch;margin-block-start:1.5rem;padding:0 1.25rem}
}

/* A big screen (1440px+): the homepage's sections (header too) widen together, and the hero's
   phones grow (476px tall) with larger words, so the cards don't look empty
   (operator, 2026-10-12). The text column keeps room for the longest button. */
@media (min-width:90rem){
  body:has(.home-main) .wrap{max-inline-size:80rem}
  .door{grid-template-columns:16rem minmax(0,1fr);gap:0 2rem;padding:1.25rem 2rem 1.25rem 1.25rem}
  .door-art{block-size:31.5rem}
  .qr-card{inline-size:6.25rem}
  .door-for{font-size:0.9375rem}
  .door h2{font-size:2.375rem}
  .door-text p:last-child{font-size:1.1875rem}
  .door-go{min-block-size:3.5rem;font-size:1.125rem}
}

/* Terms and privacy: one readable column. */
.legal{max-inline-size:44rem;padding-block:2rem 3rem}
.legal h1{font-size:2rem;line-height:1.15;margin-block-end:0.5rem}
.legal .updated{color:var(--muted);font-size:0.9rem;margin-block-end:1.25rem}
.legal .intro{font-size:1.05rem;color:var(--ink-soft);margin-block-end:1.5rem}
.legal h2{font-size:1.25rem;margin-block:1.75rem 0.6rem;letter-spacing:-0.02em}
.legal p{margin-block:0 0.75rem;color:var(--ink-soft)}
.legal ul{margin:0 0 0.75rem;padding-inline-start:1.25rem;color:var(--ink-soft)}
.legal li{margin-block-end:0.35rem}
.legal a{color:var(--accent-ink)}
@media (min-width:56rem){.legal{padding-block:3.5rem 5rem}.legal h1{font-size:2.6rem}}

/* Owner questions on the homepage (seo push, 2026-10-06). */
.home-faq{padding-block:2.5rem 1rem;max-inline-size:46rem}
.home-faq h2{margin:0 0 0.75rem}
.home-faq details{border-block-end:1px solid #e7e5e4}
/* The whole row is the target, at least 44px tall. */
.home-faq summary{padding-block:0.875rem;font-weight:700;font-size:1.0625rem;cursor:pointer}
.home-faq summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:6px}
.home-faq details p{margin:-0.375rem 0 0;padding-block-end:0.875rem;line-height:1.6}
.home-faq details p a{color:var(--accent-ink);font-weight:600}
.home-faq .fine{margin-block-start:1rem}