/* diy-guide 2026-10-31 - HiHolt hire card, version 2 (owner, 10-31 evening; spec "代办卡_定稿_v2_业主1031晚.md",
   reference rendering card_v2_1031.html): otter mark + eyebrow (no badge anywhere), headline, slogan (the only
   "no savings, no fee" on the card), four items each with its own icon (pin / document / gavel / circled $), savings
   row or the "a tax expert is reviewing it" block, the county deadline, the one button, the fee link.
   Sizes follow the reference (card 300px wide, text 258px).
   Card look only: grid placement and position:sticky of aside.diy-hire belong to diy.css (pages-a).
   Rules: font sizes only as one plain var(--fs-*); colours only existing tokens, written as
   var(--pt-x, var(--y)) so the card works in the portal shell and on the marketing intro page (both follow the
   site's dark theme through the tokens); no colour-scheme media query; nothing moves or scales in :hover / :focus.
   Breakpoints: >= 1100 right-column card; 700-1099 band under the page title;
   <= 699 bottom bar + sheet (the card node is moved into the page's #diy-sheet by diy_hire.js). */

.diy-hire {
  background: var(--pt-surface, var(--bg));
  color: var(--pt-ink, var(--ink));
  border: 1px solid var(--pt-line, var(--line));
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 22px 20px 20px;
  line-height: 1.5;
  overflow-wrap: break-word;
  min-width: 0;
}
.diy-hire p, .diy-hire ul { margin: 0; }
.diy-hire ul { padding: 0; list-style: none; }
.diy-hire .dh-ck { flex: none; width: 14px; height: 14px; color: var(--brand); }
.diy-hire .nobr { white-space: nowrap; }

/* eyebrow: the HiHolt otter mark (templates/_logo_mark.html, currentColor = the header logo's ink) + "HiHolt 代办" */
.diy-hire .dh-eyerow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.diy-hire .dh-mark { flex: none; display: inline-flex; width: 24px; height: 24px; color: var(--pt-ink, var(--ink)); }
.diy-hire .dh-mark .mark { display: block; width: 100%; height: 100%; }
.diy-hire .dh-eyebrow { font-size: var(--fs-small); font-weight: 800; letter-spacing: .08em; line-height: 1.5;
                        color: var(--brand-ink); white-space: nowrap; }

/* headline: phrases kept whole (zh "<br>" = phrase break, rendered as nowrap spans) */
.diy-hire .dh-h {
  margin: 0; padding: 0; border: 0;
  font-size: var(--fs-lede); font-weight: 800; line-height: 1.45; letter-spacing: 0;
  color: var(--pt-ink, var(--ink)); text-wrap: balance;
}
.diy-hire .dh-nw { white-space: nowrap; }

/* slogan + the four items, each with its own 18px icon aligned to the first text line */
.diy-hire .dh-pitch { margin-top: 4px; }
.diy-hire .dh-slogan { font-size: var(--fs-max-other); font-weight: 800; line-height: 1.4; color: var(--brand-ink); }
.diy-hire .dh-inc { margin-top: 16px; }
.diy-hire .dh-inc li { display: flex; align-items: flex-start; gap: 10px;
                       font-size: var(--fs-legal); line-height: 1.55; color: var(--pt-ink-2, var(--ink-2)); text-wrap: pretty; }
.diy-hire .dh-inc li + li { margin-top: 10px; }
.diy-hire .dh-ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--brand-ink); }
.diy-hire .dh-inc-x { min-width: 0; }
.diy-hire .dh-inc b { font-weight: 700; color: var(--pt-ink, var(--ink)); margin-right: 6px; white-space: nowrap; }
/* outside Chinese the bold term is followed by a real space (screen readers need it): no extra margin there */
.diy-hire:not(:lang(zh)) .dh-inc b { margin-right: 0; }

/* state cards (next year / fair / no savings / hired): one or two plain sentences */
.diy-hire .dh-say { margin-top: 10px; }
.diy-hire .dh-say-p { font-size: var(--fs-legal); line-height: 1.6; color: var(--pt-ink-2, var(--ink-2)); }
.diy-hire .dh-say-p + .dh-say-p { margin-top: 8px; }

/* result ready (P8): one line above the savings row, with a small dot */
.diy-hire .dh-ready { display: flex; align-items: center; gap: 8px; margin-top: 16px;
                      font-size: var(--fs-small); font-weight: 600; color: var(--pt-ink, var(--ink)); }
.diy-hire .dh-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pt-done, var(--money)); }

/* savings row (E1 "see potential savings") and the opened figure */
.diy-hire .dh-est { margin-top: 16px; }
.diy-hire .dh-ready + .dh-est { margin-top: 8px; }
.diy-hire .dh-e1 {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 46px; margin: 0; padding: 10px 2px;
  border: 0; border-top: 1px solid var(--pt-line, var(--line)); border-bottom: 1px solid var(--pt-line, var(--line)); border-radius: 0;
  background: none; color: var(--brand-ink); font-family: var(--font); font-size: var(--fs-body); font-weight: 600;
  line-height: 1.4; text-align: left; cursor: pointer;
}
.diy-hire .dh-e1:hover { color: var(--pt-ink, var(--ink)); }
.diy-hire .dh-chev { flex: none; width: 8px; height: 8px; margin: -4px 4px 0 0;
                     border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.diy-hire .dh-e1[aria-expanded="true"] .dh-chev { transform: rotate(-135deg); margin-top: 4px; }
.diy-hire .dh-fig { margin-top: 10px; padding: 14px 16px; border-radius: var(--r-sm);
                    background: var(--pt-done-soft, var(--money-soft)); }
.diy-hire .dh-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.diy-hire .dh-tag { display: inline-block; padding: 1px 8px; font-size: var(--fs-tiny); font-weight: 600; line-height: 1.5;
                    color: var(--pt-ink-2, var(--ink-2)); border: 1px solid var(--pt-field, var(--line-2));
                    border-radius: var(--r-pill); white-space: nowrap; }
.diy-hire .dh-tag-ok { color: var(--pt-done, var(--money)); border-color: var(--pt-done, var(--money)); }
.diy-hire .dh-lbl { margin-top: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--pt-ink-2, var(--ink-2)); }
.diy-hire .dh-amt { margin: 4px 0 6px; font-family: var(--font-num); font-size: var(--fs-val); font-weight: 800; line-height: 1.15;
                    letter-spacing: -.01em; color: var(--pt-done, var(--money)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.diy-hire .dh-amt .per { margin-left: 2px; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; color: var(--pt-ink-2, var(--ink-2)); }
/* 7a 2026-11-03: the savings range (most conservative to most aggressive) + the one line under it */
.diy-hire .dh-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0 6px; white-space: normal; }
.diy-hire .dh-end { display: flex; flex-direction: column; min-width: 0; }
.diy-hire .dh-end-l { font-family: var(--font); font-size: var(--fs-tiny); font-weight: 600; letter-spacing: 0; line-height: 1.5; color: var(--pt-ink-2, var(--ink-2)); }
.diy-hire .dh-to { line-height: 1.15; font-weight: 600; }
.diy-hire .dh-pro { margin: 0 0 8px; font-size: var(--fs-small); font-weight: 600; line-height: 1.5; color: var(--pt-ink, var(--ink)); }
.diy-hire .dh-fn { font-size: var(--fs-tiny); line-height: 1.6; color: var(--pt-ink-2, var(--ink-2)); }

/* "a tax expert is reviewing it" block (P1-P6) sits where the savings row would be */
.diy-hire .dh-wait { margin-top: 16px; padding: 12px 2px;
                     border-top: 1px solid var(--pt-line, var(--line)); border-bottom: 1px solid var(--pt-line, var(--line)); }
.diy-hire .dh-wait-t { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; color: var(--pt-ink, var(--ink)); }
.diy-hire .dh-prog { margin-top: 6px; }
.diy-hire .dh-prog li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); line-height: 1.6;
                        color: var(--pt-ink, var(--ink)); }
.diy-hire .dh-prog .dh-what { flex: 1 1 auto; min-width: 0; }
.diy-hire .dh-prog .dh-when { flex: none; white-space: nowrap; color: var(--pt-ink-2, var(--ink-2)); }
.diy-hire .dh-prog .is-done .dh-ck { color: var(--pt-ink-2, var(--ink-2)); }
.diy-hire .dh-pulse { flex: none; width: 8px; height: 8px; margin: 0 3px; border-radius: 50%;
                      border: 2px solid var(--brand); animation: dh-pulse 1.6s ease-in-out infinite; }
.diy-hire .dh-foot { margin-top: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--pt-ink-2, var(--ink-2)); }
.diy-hire .dh-msg { font-size: var(--fs-legal); line-height: 1.6; color: var(--pt-ink, var(--ink)); }
.diy-hire .is-fresh .is-done .dh-ck path { stroke-dasharray: 16; animation: dh-draw .3s ease-out both; }
@keyframes dh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes dh-draw { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .diy-hire .dh-pulse, .diy-hire .is-fresh .is-done .dh-ck path { animation: none; }
}

/* deadline (calendar icon + "Deadline: <county's date>") right above the button; the button; the monitoring line */
.diy-hire .dh-cta { margin-top: 14px; }
.diy-hire .dh-due { display: flex; align-items: center; gap: 6px;
                    font-size: var(--fs-small); font-weight: 600; line-height: 1.5; color: var(--pt-ink-2, var(--ink-2)); white-space: nowrap; }
.diy-hire .dh-cal { flex: none; width: 14px; height: 14px; }
.diy-hire .dh-due + .dh-act { margin-top: 8px; }
.diy-hire .dh-form { margin: 0; }
.diy-hire .dh-act .btn.diy-hire-go {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; margin: 0; padding: 12px 16px;
  font-family: var(--font); font-size: var(--fs-body); font-weight: 700; line-height: 1.35;
  text-align: center; white-space: normal; text-decoration: none; box-shadow: none;
  background: var(--brand-soft); border: 2px solid var(--brand); border-radius: var(--r-btn); color: var(--brand-ink);
}
.diy-hire .dh-act .btn.diy-hire-go:hover { background: var(--bg-3); border-color: var(--brand-ink); color: var(--brand-ink); box-shadow: none; }
.diy-hire .dh-act .btn.diy-hire-go.is-outline { background: transparent; border-color: var(--pt-ink, var(--ink)); color: var(--pt-ink, var(--ink)); }
.diy-hire .dh-act .btn.diy-hire-go.is-outline:hover { background: var(--pt-inset, var(--bg-2)); }
.diy-hire .dh-on { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600;
                   color: var(--pt-done, var(--money)); }
.diy-hire .dh-on .dh-ck { color: var(--pt-done, var(--money)); }

/* P7 "once the review is done, you can hire us right here": after the review block (pending states) or under
   the free-review button (state "review") */
.diy-hire .dh-p7 { margin-top: 14px; font-size: var(--fs-small); line-height: 1.5; color: var(--pt-ink-2, var(--ink-2)); text-wrap: pretty; }
.diy-hire .dh-cta + .dh-p7 { margin-top: 10px; }

/* fee link: its own line, left aligned, no indent */
.diy-hire .dh-pricing { margin-top: 10px; font-size: var(--fs-small); font-weight: 600; line-height: 1.5; }
.diy-hire .dh-pricing a { color: var(--brand-ink); text-decoration: none; white-space: nowrap; }
.diy-hire .dh-pricing a:hover { text-decoration: underline; }

/* ── 700-1099: band under the page title (spec v2 §2). Row 1: mark + eyebrow + headline | savings link | button;
      under them: fee link | the deadline (under the button); then, full width: slogan + the four "icon + bold term"
      chips (each its own block), the result-ready line, the opened figure, the review block, and P7 after it. ── */
@media (min-width: 700px) and (max-width: 1099px) {
  .diy-grid > .diy-hire, .diy-intro-grid > .diy-hire { border-radius: var(--pt-radius-card, var(--r-sm)); padding: 12px 16px; }
  .diy-hire .diy-hire-in { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 16px; row-gap: 6px;
                           align-items: center; }
  .diy-hire .dh-top { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
  .diy-hire .dh-eyerow { margin: 0 0 2px; gap: 6px; }
  .diy-hire .dh-mark { width: 20px; height: 20px; }
  .diy-hire .dh-h { font-size: var(--fs-max-other); }
  .diy-hire .dh-est, .diy-hire .dh-cta { display: contents; }
  .diy-hire .dh-e1 { grid-column: 2; grid-row: 1; width: auto; min-height: 44px; padding: 0; border: 0; color: var(--brand-ink);
                     text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
  .diy-hire .dh-e1 .dh-chev { display: none; }
  .diy-hire .dh-act { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
  .diy-hire .dh-act .btn.diy-hire-go { width: auto; min-height: 44px; padding: 8px 16px; white-space: nowrap; }
  /* fee link under the button; when the deadline is there (under the button), the fee link sits just left of it */
  .diy-hire .dh-pricing { grid-column: 3; grid-row: 2; justify-self: end; margin: 0; }
  .diy-hire .diy-hire-in:has(.dh-due) .dh-pricing { grid-column: 2; }
  .diy-hire .dh-due { grid-column: 3; grid-row: 2; justify-self: end; margin: 0; }
  .diy-hire .dh-pitch, .diy-hire .dh-say { grid-column: 1 / -1; grid-row: 3; margin: 0; }
  .diy-hire .dh-ready, .diy-hire .dh-fig, .diy-hire .dh-wait,
  .diy-hire .dh-p7, .diy-hire .dh-cta + .dh-p7 { grid-column: 1 / -1; margin: 0; }
  /* result ready (P8): its own line right under row 1-2 (next to the savings link), above the slogan + chips */
  .diy-hire .diy-hire-in:has(.dh-ready) .dh-ready { grid-row: 3; }
  .diy-hire .diy-hire-in:has(.dh-ready) :is(.dh-pitch, .dh-say) { grid-row: 4; }
  .diy-hire .dh-pitch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
  .diy-hire .dh-slogan { font-size: var(--fs-body); white-space: nowrap; }
  .diy-hire .dh-inc { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
  .diy-hire .dh-inc li { align-items: center; gap: 6px; font-size: var(--fs-small); white-space: nowrap; }
  .diy-hire .dh-inc li + li { margin-top: 0; }
  .diy-hire .dh-ic { width: 16px; height: 16px; margin-top: 0; }
  .diy-hire .dh-inc b { margin-right: 0; }
  .diy-hire .dh-inc-d { display: none; }
  .diy-hire .dh-say-p { font-size: var(--fs-small); }
  .diy-hire .dh-wait { padding: 8px 0 0; border-bottom: 0; }
}

/* ── <= 699: bottom bar (otter mark + "HiHolt 代办" / "不省税，不收费" [Details]) + sheet ── */
.diy-hire-bar { display: none; }
@media (max-width: 699px) {
  .diy-hire-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border: 0; border-top: 1px solid var(--pt-line, var(--line)); border-radius: 0;
    background: var(--pt-surface, var(--bg)); color: var(--pt-ink, var(--ink)); box-shadow: var(--sh-md);
    font-family: var(--font); text-align: left; cursor: pointer;
  }
  .diy-hire-bar .dh-bar-mark { flex: none; display: inline-flex; width: 20px; height: 20px; color: var(--pt-ink, var(--ink)); }
  .diy-hire-bar .dh-bar-mark .mark { display: block; width: 100%; height: 100%; }
  .diy-hire-bar .dh-bar-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
  .diy-hire-bar .dh-bar-t { font-size: var(--fs-body); font-weight: 700; line-height: 1.35; }
  .diy-hire-bar .dh-bar-sub { font-size: var(--fs-small); font-weight: 500; line-height: 1.4; color: var(--pt-ink-2, var(--ink-2)); }
  .diy-hire-bar .dh-bar-pill {
    flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 20px;
    font-size: var(--fs-body); font-weight: 700; line-height: 1.25; white-space: nowrap;
    background: var(--brand-soft); border: 1.5px solid var(--brand); border-radius: var(--r-btn); color: var(--brand-ink);
  }
  /* the signed bar's [See progress]: the site's phone rules stretch every .btn to 100% width (app.css <= 700px,
     portal.css <= 640px); here it keeps its own width so the text beside it stays on one line */
  .diy-hire-bar .btn.dh-bar-go { flex: none; width: auto; margin: 0; padding: 8px 20px; min-height: 44px; white-space: nowrap; }
  body.dh-has-bar { padding-bottom: 88px; }
  body.dh-typing .diy-hire-bar { display: none; }
  /* the signed banner's button is the same as the bar's solid button: shown once (v3) */
  .diy-hire-banner .btn { display: none; }
}

/* the card inside the phone sheet: no frame, the full content (same as the default card), solid button (its own screen) */
#diy-sheet-body > aside.diy-hire, .dh-sheet-own aside.diy-hire {
  display: block; position: static; width: auto; max-width: none; margin: 0;
  padding: 4px 0 0; border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
#diy-sheet-body > aside.diy-hire .dh-eyerow, .dh-sheet-own aside.diy-hire .dh-eyerow { padding-right: 44px; }   /* room for the sheet's close button */
#diy-sheet-body > aside.diy-hire .dh-act .btn.diy-hire-go:not(.is-outline),
.dh-sheet-own aside.diy-hire .dh-act .btn.diy-hire-go:not(.is-outline) {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
}

/* fallback sheet (only when the page has no #diy-sheet) */
.dh-sheet-own { position: fixed; inset: 0; z-index: 70; }
.dh-sheet-own[hidden] { display: none; }
.dh-sheet-own .dh-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--pt-canvas, var(--bg)) 70%, transparent); }
.dh-sheet-own .dh-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 90vh; overflow: auto; overscroll-behavior: contain;
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
  background: var(--pt-surface, var(--bg)); border-radius: 18px 18px 0 0; box-shadow: var(--sh-lg);
}
.dh-sheet-own .dh-grab { width: 40px; height: 4px; margin: 4px auto 10px; border-radius: 2px; background: var(--pt-field, var(--line-2)); }
.dh-sheet-own .dh-x {
  position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; border: 0; background: none; cursor: pointer;
  font-size: var(--fs-h3); line-height: 1; color: var(--pt-ink-2, var(--ink-2));
}

/* 7a 2026-11-03: the small ad inside step 2c (_diy_s2c_ad.html) */
.diy .diy-ad { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: var(--sp-4) 0; padding: 16px 18px;
               border: 1px solid var(--brand); border-radius: var(--r-sm); background: var(--pt-inset, var(--bg-2)); }
.diy .diy-ad-mark { flex: none; display: inline-flex; width: 32px; height: 32px; color: var(--pt-ink, var(--ink)); }
.diy .diy-ad-mark .mark { display: block; width: 100%; height: 100%; }
.diy .diy-ad-x { flex: 1 1 260px; min-width: 0; }
.diy .diy-ad-h { margin: 0 0 2px; font-size: var(--fs-max-other); font-weight: 800; line-height: 1.4; }
.diy .diy-ad-d { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--pt-ink-2, var(--ink-2)); }
.diy .diy-ad-s { color: var(--pt-done, var(--money)); white-space: nowrap; }
.diy .diy-ad-go { flex: none; margin: 0; }
@media print { .diy .diy-ad { display: none !important; } }

@media print {
  .diy-hire, .diy-hire-bar, .dh-sheet-own { display: none !important; }
}