@charset "UTF-8";
/* WPK Notary — home page, ALTERNATIVE ART DIRECTION (v3).
   Loaded only at ?page=v3-home, after assets/css/v2/styles.css. See the header of
   pages/v3-home.php for the thesis and the rule-by-rule check against DESIGN.md.

   This file recomposes. It defines NO colour, NO radius, NO shadow and NO type size of
   its own - everything comes from the v2 token layer.

   It had exactly one exception until 2 September 2026: --v3-type-hero, an 84px clamp
   that took the headline past the 48px the v2 scale topped out at. That was a real
   deviation from the Declared-Size Rule, carried openly with a note saying a type role
   belongs in tokens/typography.css and should be promoted there if v3 won. v3 did win,
   and the resolution was the other one available: the H1 took --type-display-page, the
   role its five sibling pages already used, and the deviation was deleted rather than
   promoted. Nothing to merge at flip time now.

   Three moves, in order of how much they change the page:
     1. .v3-rail       — a narrow marks column beside a wide reading column. The
                         direction's spine, repeated down the page.
     2. .v3-proof      — the signature band. Gold wash ground, registration number at
                         display scale in mono.
     3. .v3-schedrow   — services as a numbered schedule instead of three cards.

   Two thresholds only, 1024px and 768px, as the system requires. */

/* ------------------------------------------------------------------- 1. hero */

.v3-hero {
  background-image: url("../../v2/photos/bg-hero.jpg");
  /* No scrim. The JPEG ships pre-duotoned to --surface-dark and white measures
     10.3:1 against the lightest pixel in the text column; an overlay would
     double-darken it. See the No-Scrim Rule. */
  padding: clamp(44px, 6vw, 72px) clamp(18px, 4vw, 48px) clamp(48px, 6vw, 80px);
}

.v3-hero__mark {
  margin-bottom: clamp(18px, 2.5vw, 26px);
}

.v3-hero__mark .v2-badgepill {
  margin-top: 12px;
}

/* 52px AT 600, WHICH IS WHAT THE OTHER FIVE v3 PAGES USE.

   This was 84px at --weight-bold (700), on the argument that 700 was declared in
   tokens/typography.css with no consumer and that the extra weight bought legibility
   over the photograph. Both halves were wrong in practice. The owner's read was "too
   big and too thick, in your face", and the numbers backed it: FOUR lines at 80.6px
   against two lines at 52px on every sibling page, and 700 against the 600 every other
   heading on the site carries. Weight was the worse of the two - the size already
   clamps to 30px on a phone, so 700 was the only thing making the phone hero heavy.

   --weight-bold now has no consumer again. That is the honest state; do not reach for
   it here to give the H1 "contrast" a second time. */
.v3-hero__title {
  margin: 0;
  font-size: var(--type-display-page);
  font-weight: var(--weight-semibold);
  /* px, not ch. The ch unit is the advance width of "0" and bears no relation to
     Thai glyph widths - a 78ch cap once truncated a Thai paragraph by 387px inside
     its own box. At 52px, 900px breaks the five phrases two-and-three across two
     lines, which is the balance the band wants. See the ch-Is-Latin Rule. */
  max-width: min(900px, 100%);
}

/* Each service phrase is held together so Chrome's Thai dictionary breaker cannot
   split a term across two lines. The 30px floor on --type-display is load-bearing
   and untouched here. */
.v3-hero__title span {
  white-space: nowrap;
}

.v3-hero__lead {
  margin: 18px 0 0;
  max-width: var(--measure-lead);
  color: var(--text-on-dark-soft);
}

.v3-hero__btns {
  margin-top: clamp(24px, 3vw, 32px);
  align-items: center;
}

.v3-hero__foot {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 20px;
  border-top: var(--border-on-dark);
  max-width: var(--measure-read);
}

.v3-hero__footlabel {
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  color: var(--text-on-dark-soft);
}

.v3-hero__footlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(20px, 3vw, 36px);
  margin-top: 10px;
  font-size: var(--type-base);
  line-height: var(--lh-label);
  color: var(--text-on-dark);
}

/* ------------------------------------------------ 2. proof — the signature band */

/* The only band on the page with its own ground, and the only place the
   registration number appears.

   --surface-gold-wash was declared in tokens/colors.css and used by nothing. Here it
   is a third band ground beside white, soft grey and navy: warmth without a third
   hue. The ink on it is navy, which is the only legal pairing - gold carries navy or
   nothing, per the Gold-Never-Fills Rule. The 2px gold rule is the top edge, which
   is the house accent at its declared weight rather than a new device. */
.v3-proof {
  padding: var(--v3-pad-tight) clamp(18px, 4vw, 48px);
  background: var(--surface-gold-wash);
  border-top: var(--rule-gold);
  /* border-bottom is set once, at the end of this file where the band's framing is
     explained. It used to be declared here as --border-gold too, and that first
     declaration was dead. */
}

.v3-proof__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}

.v3-proof__badge {
  display: block;
  line-height: 0;
}

.v3-proof__badge img {
  display: block;
  height: 56px;
  width: auto;
}

.v3-proof__label {
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  color: var(--accent-gold);
}

/* The signature. Mono, tabular, at display scale - DESIGN.md's own statement that
   numerals are set in mono "so a registration number, a date and a count all line up
   as record rather than as prose", finally executed at a size that carries it.

   letter-spacing is legal here and only here: the string is thirteen Latin digits,
   not Thai. The Thai-Tracking-Zero Rule governs strings containing Thai. */
.v3-proof__num {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--type-display);
  line-height: var(--lh-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--color-primary);
}

.v3-proof__foot {
  margin-top: 6px;
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  color: var(--text-muted);
}

.v3-proof__foot a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------- 3. frequent documents */

.v3-docs {
  padding: var(--v3-pad-tight) clamp(18px, 4vw, 48px);
  background: var(--surface-dark);
  border-bottom: var(--border-on-dark);
}

.v3-docs__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
}

.v3-docs__label {
  flex: none;
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  color: var(--text-on-dark-soft);
}

/* Below 768px this scrolls sideways rather than wrapping: six pills that wrap build a
   six-row wall directly under the proof band and push everything else off screen. */
/* min-width and max-width are load-bearing, not defensive.

   Below 1024px .v3-docs__inner becomes `flex-direction: column; align-items:
   flex-start`, which makes this rail take its MAX-CONTENT cross size - measured at
   516.5px inside a 354px container at a 390px viewport. `overflow-x: auto` then never
   engages, because the box grew instead of scrolling, and the whole page drifted
   sideways: scrollWidth 535 against a 390 viewport, 145px of horizontal scroll, and
   215px at 320. .v2-docs__rail carries exactly these two declarations and measures
   0px overflow at every width; this file had dropped them. */
.v3-docs__rail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

/* On navy the pill steps UP to --surface-dark-elevated rather than lifting with a
   shadow - the pattern DESIGN.md specifies for anything sitting on a navy band. */
/* Was height 36px at --type-micro (14px/400). Two floors broken at once: controls are
   44px, and reading text never drops below 16px. Worse, these were the only sub-15px
   Thai strings on the page, and they are how a visitor answers "is my document
   covered?" - the single most important recognition task on the surface. --type-micro's
   declared role is "footer column head, TH/EN toggle, registration number", not Thai
   document names. */
.v3-docs__pill {
  display: inline-flex;
  align-items: center;
  height: var(--control-height);
  padding: 0 16px;
  border: var(--border-on-dark);
  border-radius: var(--radius-pill);
  background: var(--surface-dark-elevated);
  font-size: var(--type-base);
  line-height: var(--lh-label);
  color: var(--text-on-dark);
  text-decoration: none;
  transition: background var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease);
}

.v3-docs__pill:hover {
  background: var(--color-primary);
  color: var(--text-on-dark);
  text-decoration: none;
}

/* ------------------------------------------------ 5. เริ่มใช้บริการอย่างไร */

.v3-send__title {
  margin: 0;
}

.v3-send__lead {
  margin: 18px 0 0;
  max-width: var(--measure-lead);
}

.v3-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 26px) clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 3.5vw, 40px);
}

.v3-checklist__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.v3-checklist__mark {
  display: flex;
  color: var(--accent-gold);
}

.v3-checklist__title {
  font-size: var(--type-subtitle);
  line-height: var(--lh-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--thai-tracking);
  color: var(--text-ink);
}

.v3-send__cta {
  margin-top: clamp(28px, 3.5vw, 40px);
}


/* .v3-how above ends on the same --surface-dark as this band begins, with no divider
   between them: 1,083px of unbroken navy at 1440 and 2,207px at 390, carrying two H2s
   and eight list items with whitespace as the only cue that the subject changed. The
   hairline is the same one .v3-docs already uses to close itself against navy. */
.v2-band--dark.v3-why {
  border-top: var(--border-on-dark);
}

.v3-why__title {
  margin: 0;
}

.v3-why__lead {
  margin: 18px 0 0;
  max-width: var(--measure-lead);
}

/* A list, not a card holding a grid. The capability claims are a list of facts, and a
   card around them adds a border that says "this is a separate object" when it is
   not. Two columns of rows, hairline-separated. */
.v3-whylist {
  list-style: none;
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
  border-top: var(--border-hairline);
}

.v3-whylist__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: clamp(14px, 1.8vw, 18px) 0;
  border-bottom: var(--border-hairline);
}

.v3-whylist__label {
  font-size: var(--type-base);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-body-strong);
}

/* The optional photograph, when one exists. A framed object in gold - the opposite
   treatment from the photo bands, which are grounds. */
.v3-figure {
  margin: clamp(32px, 4vw, 48px) 0 0;
}

.v3-figure__frame {
  border: var(--border-gold);
  border-radius: var(--radius-card);
  overflow: hidden;
  height: clamp(220px, 30vw, 380px);
}

.v3-figure__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------- 8. articles */

.v3-arts {
  border-top: var(--border-hairline);
}

.v3-arts__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
}

.v3-arts__title {
  margin: clamp(16px, 2vw, 24px) 0 0;
  max-width: var(--measure-read);
}

.v3-arts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-card-grid);
  margin-top: clamp(32px, 4vw, 48px);
}

/* ------------------------------------------------- 9. reasons + closing ask */

/* The two promises the design review placed beside the button. Tight density and no
   card: they are a caption to the ask below, not three more objects. */
.v3-reasons {
  padding: var(--v3-pad-tight) clamp(18px, 4vw, 48px);
  background: var(--surface-dark);
  border-top: var(--border-on-dark);
}

.v3-reasons__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
}

.v3-reason__title {
  font-size: var(--type-subtitle);
  line-height: var(--lh-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--thai-tracking);
  color: var(--text-on-dark);
  margin-bottom: 4px;
}

.v3-reasons .v2-note {
  color: var(--text-on-dark-soft);
}

.v3-cta {
  background-image: url("../../v2/photos/bg-cta.jpg");
  background-position: left center;
  padding: clamp(48px, 7vw, 88px) clamp(18px, 4vw, 48px);
}

.v3-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.v3-cta__title {
  margin: 12px 0 0;
  color: var(--text-on-dark);
}

.v3-cta__lead {
  margin: 14px 0 0;
  max-width: var(--measure-lead);
  color: var(--text-on-dark-soft);
}

.v3-cta__btns {
  margin-top: clamp(24px, 3vw, 32px);
}

.v3-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.v3-qr__img {
  display: block;
  border-radius: var(--radius-sm);
  background: var(--canvas);
  padding: 8px;
}

.v3-qr__cap {
  text-align: center;
  max-width: none;
}

.v3-qr__id {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ================================================================ 1024px */

@media (max-width: 1023px) {

  .v3-arts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v3-cta__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .v3-docs__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ================================================================= 768px */

@media (max-width: 767px) {
  .v3-proof__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .v3-checklist,
  .v3-whylist,
  .v3-arts__grid,
  .v3-reasons__grid {
    grid-template-columns: minmax(0, 1fr);
  }


  /* Six pills wrapping build a six-row wall under the proof band. Scroll sideways
     instead, which is what the v2 page does at this width too. */
  .v3-docs__rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .v3-docs__pill {
    flex: none;
  }

  .v3-arts__head {
    flex-direction: column;
    align-items: flex-start;
  }

}

/* ============================================================ on navy ground

   The page is now navy-dominant: five of the ten bands carry --surface-dark. The
   components below were built for a light ground and each one has a part that
   disappears, or drops below contrast, on navy. .v2-band--dark in app.css already
   handles the headings, the lead, the gold rule, the eyebrow and the focus ring, so
   only these are left.

   Nothing here introduces a colour. Every value is an existing token whose whole
   purpose is the dark half of the system. */

/* --wash-navy is rgba(6,57,112,0.07) - navy at 7% on navy is invisible. On dark the
   plate inverts: a white wash carrying a champagne glyph. */
/* .v2-band--dark .v2-iconplate moved to app.css - the plate inverts on navy wherever
   a navy band appears, not only on the home page. The two home-only grounds that are
   dark without carrying .v2-band--dark keep their selectors there. */
.v3-docs .v2-iconplate,
.v3-reasons .v2-iconplate {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent-gold-on-dark);
}

/* --- the steps, on navy --- */

/* The on-dark .v3-step overrides went with the band. The chain track needs none: it
   is authored on navy from the start, so every value in it is already an on-dark
   token rather than a light-ground value being corrected. */

/* --- the why list, on navy --- */

.v2-band--dark .v3-whylist {
  border-top: var(--border-on-dark);
}

.v2-band--dark .v3-whylist__item {
  border-bottom: var(--border-on-dark);
}

.v2-band--dark .v3-whylist__label {
  color: var(--text-on-dark);
}



/* The gold-wash proof band sits directly under the navy hero and directly above the
   navy documents rail, so it is now framed by dark on both sides. That contrast is
   the point: it is the brightest thing on the page and it carries the one fact a
   visitor can independently verify. Its bottom edge becomes a gold rule to match its
   top, so the band reads as a plate set into the navy rather than as a gap. */
.v3-proof {
  border-bottom: var(--rule-gold);
}