/* lemoncoai.com page rules. Loads after /brand/lemonco.css (tokens) and /brand/lemonco-ui.css (lc- components),
   both copied from ../brand by build.py. Only what the component layer does not cover lives here. */

/* service cards: spacing from ui/homepage-reference.html */
.svc h3{margin-top:10px}
.svc .lc-checks{margin-top:14px;font-size:.95rem}

/* gains: three icon tiles right under the hero */
.gains{padding:28px 0;border-top:1px solid var(--lc-line);background:var(--lc-card)}
.gain{display:flex;align-items:center;gap:14px}
.gain .lc-icon-tile{margin:0;flex:none}
.gain h3{margin:0;font-size:1.02rem}
.gain p{margin:2px 0 0;font-size:.875rem;color:var(--lc-muted)}
@media (max-width:900px){.gains .lc-grid{grid-template-columns:1fr;gap:14px}}

/* tables: before/after under the pain cards, rent vs own */
.cmp{margin-top:36px}
.stack .lc-table{min-width:0}
.own thead td{background:var(--lc-thead)}
.own tbody th{font-weight:600}
.mk{display:flex;gap:8px;align-items:flex-start}
.mk svg{flex:none;width:18px;height:18px;margin-top:.15em;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mk-yes{stroke:var(--lc-leaf)}
.mk-no{stroke:var(--lc-alert-fg)}

/* how it works: five steps on one line. Steps 1-2 free (leaf), 3-4 paid (lemon), 5 optional (dashed) */
.flow{--d:104px;--gap:16px;--line:color-mix(in srgb,var(--lc-ink) 30%,transparent);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);counter-reset:flow}
.flow li{position:relative;text-align:center;counter-increment:flow}
.flow li:not(:last-child)::after{content:"";position:absolute;top:calc(var(--d) / 2 - 1px);left:calc(50% + var(--d) / 2);width:calc(100% + var(--gap) - var(--d));border-top:2px solid var(--line)}
.flow li:nth-child(4)::after{border-top-style:dashed}
.flow-ico{position:relative;display:grid;place-items:center;width:var(--d);height:var(--d);margin:0 auto 16px;border-radius:50%;border:2px solid var(--lc-leaf);background:var(--lc-leaf-soft)}
.flow-ico img{width:58%;height:58%;object-fit:contain}
.flow-ico::before{content:counter(flow);position:absolute;top:-4px;left:-4px;width:30px;height:30px;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;font:700 1rem/1 var(--lc-font-display);background:var(--lc-leaf);color:var(--lc-paper)}
.flow-tag{position:absolute;top:-6px;right:-18px}
.flow h3{margin:0 0 4px;font-size:1.02rem}
.flow p{margin:0;font-size:.875rem;color:var(--lc-ink-2)}
.flow .is-free .flow-tag{background:var(--lc-leaf);color:var(--lc-paper)}
.flow .is-paid .flow-ico{border-color:var(--lc-lemon);background:var(--lc-lemon-soft)}
.flow .is-paid .flow-ico::before{background:var(--lc-lemon);color:var(--lc-on-lemon)}
.flow .is-optional .flow-ico{border-style:dashed;border-color:var(--lc-muted);background:var(--lc-card)}
.flow .is-optional .flow-ico::before{background:var(--lc-card);color:var(--lc-ink);border:2px dashed var(--lc-muted)}
.flow .is-optional .flow-tag{background:var(--lc-card);color:var(--lc-ink-2);border:1px dashed var(--lc-muted)}
/* time pill: hangs off the bottom of the circle on wide screens, follows the title on phones */
.flow-time{position:absolute;top:calc(var(--d) - 11px);left:50%;transform:translateX(-50%);padding:2px 9px;border:1px solid var(--lc-line);border-radius:var(--lc-radius-pill);background:var(--lc-card);font-size:.72rem;font-weight:600;line-height:1.4;color:var(--lc-ink-2);white-space:nowrap}
@media (max-width:1000px){.flow{--d:88px}}

/* principles: icon and title; the sentence opens on tap */
.pr-grid{align-items:start}
.pr{padding:0}
.pr summary{display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;list-style:none}
.pr summary::-webkit-details-marker{display:none}
.pr summary::after{content:"+";margin-left:auto;font-size:1.3rem;line-height:1;color:var(--lc-band-text)}
.pr[open] summary::after,.lc-faq[open] summary::after{content:"\2212"}
.pr .lc-icon-tile{margin:0;flex:none}
.pr h3{margin:0;font-size:1.02rem}
.pr p{padding:0 20px 18px}

.faq-list{max-width:860px}
#contact{border-top:0}
.cta-loc{font-size:.9rem}
.cta-btn{margin-top:16px}

/* FAQ: the whole card row opens the answer, not just the question text */
.lc-faq{padding:0}
.lc-faq summary{padding:18px 22px}
.lc-faq[open] summary{padding-bottom:0}
.lc-faq p{margin:0;padding:12px 22px 18px}

/* ---------- /book/: contact form, one question per screen (src/book.js); without JS every step shows ---------- */
.bk{max-width:680px;padding-block:48px 84px}
.bk [hidden]{display:none!important} /* .lc-btn sets display, which would otherwise beat the hidden attribute */
.bk-form .lc-eyebrow{font:600 .8rem/1.4 var(--lc-font-body)}
.bk-bar{display:none;height:6px;margin:0 0 32px;border-radius:var(--lc-radius-pill);background:var(--lc-line);overflow:hidden}
.bk-bar i{display:block;height:100%;width:calc(var(--p,.2) * 100%);background:var(--lc-lemon);transition:width .25s}
.bk-form.js .bk-bar{display:block}
.bk-form.js .bk-step{display:none}
.bk-form.js .bk-step.is-on{display:block}
.bk-step{min-width:0;margin:0 0 32px;padding:0;border:0}
.bk-step legend{padding:0;margin-bottom:20px}
.bk-q{margin:0;font-size:clamp(1.5rem,4vw,2rem)}
.bk-q:focus{outline:none}
.bk-hint{margin:-8px 0 16px;color:var(--lc-muted)}
.bk-field{display:grid;gap:6px;margin-bottom:16px;font-size:.95rem;font-weight:600}
.bk-field em{font-style:normal;font-weight:400;color:var(--lc-muted)}
.bk-note{margin:4px 0 0;font-size:.85rem;color:var(--lc-muted)}
.bk-note p{margin:0}
.bk-note details{margin-top:6px}
.bk-note summary{cursor:pointer;text-decoration:underline;text-underline-offset:.18em}
.bk-note ul{margin:6px 0 0;padding-left:1.2em}
.bk-note li{margin-top:4px}
.bk-form:not(.js) .bk-js-only{display:none}
.bk-flash{display:none;margin:0 0 24px;padding:12px 16px;border:1px solid var(--lc-alert-fg);border-radius:var(--lc-radius-md,10px);font-weight:600;color:var(--lc-alert-fg)}
.bk-flash:target{display:block}
.bk-flash,.bk-err{scroll-margin-top:96px} /* clear the sticky header when the page jumps to the message */
.bk-group{margin-bottom:18px}
.bk-group h3{margin:0 0 8px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--lc-muted)}
.bk-chips{display:flex;flex-wrap:wrap;gap:10px}
.bk-chip{position:relative}
.bk-chip input{position:absolute;opacity:0;width:1px;height:1px}
.bk-chip span{display:inline-block;padding:10px 16px;border:1px solid var(--lc-line);border-radius:var(--lc-radius-pill);background:var(--lc-card);font-size:.95rem;line-height:1.35;cursor:pointer}
.bk-chip span:hover{border-color:var(--lc-muted)}
.bk-chip input:checked + span{border-color:var(--lc-ink);background:var(--lc-lemon-soft);font-weight:600}
.bk-chip input:checked + span::before{content:"\2713\00a0"}
.bk-chip input:focus-visible + span{outline:2px solid var(--lc-leaf);outline-offset:2px}
.bk-other{display:none;margin-top:14px}
.bk-step:has(input[value="other"]:checked) .bk-other{display:grid}
.bk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bk-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.bk-err{margin:0 0 16px;font-weight:600;color:var(--lc-alert-fg)}
.bk-err:empty{margin:0} /* always in the page, so screen readers announce the message the moment it is set */
.bk-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.bk-next{margin-left:auto}
.bk-skip{padding:12px 8px;border:0;background:none;font:inherit;color:var(--lc-ink-2);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.bk-done{display:none;padding-block:24px;text-align:center}
.bk-done:target{display:block}
.bk-done:target + .bk-form{display:none}
.bk-done:focus{outline:none}
.bk-done .lc-lead{margin-inline:auto}
.bk-done__art{width:160px;margin:0 auto 24px}

/* ---------- phones ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
h1{text-wrap:balance}
h2{text-wrap:pretty}
@media (max-width:720px){
  /* flow turns vertical, the line runs down the left */
  .flow{--d:72px;--gap:28px;grid-template-columns:1fr}
  .flow li{display:grid;grid-template-columns:var(--d) 1fr;column-gap:20px;align-items:center;text-align:left}
  .flow-ico{margin:0;grid-row:1 / 3}
  .flow h3{align-self:end}
  .flow p{align-self:start}
  .flow li:not(:last-child)::after{top:var(--d);left:calc(var(--d) / 2 - 1px);width:0;height:calc(100% - var(--d) + var(--gap));border-top:0;border-left:2px solid var(--line)}
  .flow li:nth-child(4)::after{border-left-style:dashed}
  .flow-time{position:static;display:inline-block;transform:none;vertical-align:2px}
}
@media (max-width:620px){
  .lc-hero{padding:48px 0 56px}
  /* buttons fill the row and wrap their label instead of pushing the page sideways */
  .cta-btn{display:flex}
  .lc-btn-row .lc-btn,.cta-btn .lc-btn{flex:1 1 auto;white-space:normal;text-align:center}
  /* tables become one block per row: name on top, the two options side by side */
  .stack .lc-table,.stack thead,.stack tbody{display:block}
  .stack tr{display:grid;grid-template-columns:1fr 1fr}
  .stack th,.stack td{display:block;border:0;padding:10px 14px}
  .stack thead tr{border-bottom:1px solid var(--lc-line)}
  .stack thead tr > :first-child{grid-column:1 / -1}
  .stack thead tr > :not(:first-child){display:none}
  .own thead{display:none}
  .stack tbody tr + tr{border-top:1px solid var(--lc-line)}
  .stack tbody tr > :first-child{grid-column:1 / -1;padding-bottom:0}
  .stack tr:last-child td.is-us{grid-column:2}
  .stack td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:.75rem;font-weight:600;color:var(--lc-muted)}
}
@media (max-width:520px){.lc-lang a{padding:8px 11px}}

/* Chinese pages: per-script system fonts, incl. the Windows fallbacks the token stacks lack. Set on the tokens,
   so components that name a font themselves (.lc-btn, .lc-input) follow too, not only body text. */
html[lang="zh-Hans"]{--lc-font-body:Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  --lc-font-display:Fraunces,Georgia,"Songti SC","Noto Serif CJK SC",SimSun,serif;--lc-font-heading:var(--lc-font-display)}
html[lang="zh-Hant"]{--lc-font-body:Inter,"PingFang TC","PingFang HK","Microsoft JhengHei","Noto Sans CJK TC",system-ui,sans-serif;
  --lc-font-display:Fraunces,Georgia,"Songti TC","Noto Serif CJK TC",PMingLiU,serif;--lc-font-heading:var(--lc-font-display)}
/* Chinese headings break only at punctuation and at the <wbr> marks in src/strings.py, never inside a word */
html[lang^="zh"] :is(h1,h2){word-break:keep-all;overflow-wrap:break-word}
/* no single word or character left alone on the last line (progressive: ignored where unsupported) */
p,li,summary{text-wrap:pretty}
/* the English headline is longer than the reference one; a size step down keeps it to five lines on desktop */
html[lang="en"] .lc-hero h1{font-size:clamp(1.75rem,4vw,2.7rem)}
/* very narrow phones: past six lines `balance` gives up, so a smaller size, and `pretty` keeps the last word company */
@media (max-width:360px){html[lang="en"] .lc-hero h1{font-size:1.6rem;text-wrap:pretty}}

/* last table row: row headers (th) lose their bottom rule like the cells do */
.lc-table tbody tr:last-child th{border-bottom:0}
.lc-nav__brand picture{display:block}

/* focus rings that stay visible on the lemon panel and the dark band (the leaf ring is too faint there) */
.lc-cta :focus-visible{outline-color:var(--lc-on-lemon)}
.lc-band :focus-visible{outline-color:var(--lc-lemon)}