/* Base sheet, hand-authored. build.mjs appends generated .s* rules (shared
   inline styles lifted out of the design) and .hv*:hover rules below. */

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  background: #ffffff;
  font-family: Inter, 'IBM Plex Sans Thai', -apple-system, 'Helvetica Neue', sans-serif;
}
* { box-sizing: border-box; }
a { color: #5852C6; text-decoration: none; }
a:hover { color: #3F3A9B; }

.page {
  font-family: Inter, 'IBM Plex Sans Thai', -apple-system, 'Helvetica Neue', sans-serif;
  color: #333840;
  background: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main { flex: 1; }

/* Header lockup: mark stacked above the wordmark, both exactly the same width.
   The mark is an empty box carrying a background image rather than an <img>,
   because an empty box contributes no intrinsic width — so the column is sized
   entirely by the wordmark and the mark stretches to match it. No hardcoded
   pixel width to drift when the type or the artwork changes.
   --logo-aspect is emitted by build.mjs from the PNG's own dimensions. */
.brand-mark {
  display: block;
  aspect-ratio: var(--logo-aspect, 1);
  background: url("/assets/cofello-logo.png") center / contain no-repeat;
}

/* The wordmark must not wrap: its single-line width is what the mark above it
   is matching. Each lockup keeps the design's own type size, so the header
   ("Cofello", 18px) and footer ("Cofello Co., Ltd.", 16px) each get a mark
   sized to their own word. */
.brand-lockup > span:last-child {
  white-space: nowrap;
  text-align: center;
  line-height: 1.15;
}

img { max-width: 100%; }

/* The design documents no focus treatment, but a keyboard user needs one and
   the nav is entirely links. Brand purple, matching the link colour. */
:focus-visible { outline: 2px solid #5852C6; outline-offset: 2px; }

/* Skip link: visually hidden until focused. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #181d26;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  z-index: 50;
}
.skip:focus {
  left: 0;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Thai sets taller than Latin at the same size, so the EN and ไทย chips would
   otherwise be different heights inside their shared bordered container. */
.lang-btn {
  display: block;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Header navigation.

   CSS-only disclosure: the checkbox holds the open/closed state, its label is
   the visible button. No JavaScript, so this works under `script-src 'none'`.
   The checkbox stays focusable (not display:none) so the menu is reachable and
   toggleable from the keyboard with Space.
   --------------------------------------------------------------------------- */
.nav-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.nav-burger { display: none; }

/* Desktop: the panel is just an inline row, as the design has it. */
.nav-panel {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

@media (max-width: 767px) {
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    width: 44px;              /* WCAG touch target */
    height: 44px;
    padding: 11px 9px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    cursor: pointer;
  }
  .nav-burger span {
    display: block;
    height: 2px;
    background: #181d26;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* Open state: the bars become an X. */
  .nav-check:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-check:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-check:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-check:focus-visible ~ .nav-burger {
    outline: 2px solid #5852C6;
    outline-offset: 2px;
  }

  .nav-panel {
    display: none;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 0 4px;
  }
  .nav-check:checked ~ .nav-panel { display: flex; }

  /* The design's inline nav is a horizontal row with margin-left:auto; stack it. */
  .nav-panel nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    width: 100%;
  }
  .nav-panel nav a {
    font-size: 17px;
    padding: 13px 0;
    border-bottom: 1px solid #eeeeee;
  }

  /* Language toggle + FelloLens CTA, below the links. */
  .nav-panel > div:last-child {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 14px;
  }
}

:root { --logo-aspect: 502 / 224; }

/* --- generated: shared inline styles lifted from the design --- */
.s0 { position: sticky; top: 0; z-index: 20; background: #ffffff; border-bottom: 1px solid #dddddd; }
.s1 { max-width: 1280px; margin: 0 auto; padding: 10px clamp(20px,5vw,48px); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.s2 { display: inline-flex; flex-direction: column; align-items: stretch; gap: 0px; color: #181d26; }
.s3 { font-size: 18px; font-weight: 500; letter-spacing: 0.2px; color: #181d26; }
.s4 { display: flex; align-items: center; gap: 24px; font-size: 14px; margin-left: auto; }
.s5 { color: #181d26; font-weight: 500; }
.s6 { color: #41454d; font-weight: 500; }
.s7 { display: flex; align-items: center; gap: 16px; }
.s8 { display: flex; align-items: center; gap: 2px; border: 1px solid #dddddd; border-radius: 6px; padding: 2px; }
.s9 { border: 0; font-family: inherit; font-size: 13px; font-weight: 500; padding: 5px 10px; border-radius: 4px; background: #181d26; color: #ffffff; }
.s10 { border: 0; font-family: inherit; font-size: 13px; font-weight: 500; padding: 5px 10px; border-radius: 4px; background: transparent; color: #41454d; }
.s11 { background: #181d26; color: #ffffff; font-size: 15px; font-weight: 500; padding: 12px 20px; border-radius: 12px; white-space: nowrap; }
.s12 { padding: clamp(56px,9vw,96px) clamp(20px,5vw,48px); }
.s13 { max-width: 1280px; margin: 0 auto; }
.s14 { font-size: 14px; font-weight: 500; letter-spacing: 0.16px; color: #41454d; margin: 0 0 20px; }
.s15 { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.s16 { background: #181d26; color: #ffffff; font-size: 16px; font-weight: 500; padding: 16px 24px; border-radius: 12px; }
.s17 { background: #ffffff; color: #181d26; border: 1px solid #dddddd; font-size: 16px; font-weight: 500; padding: 16px 24px; border-radius: 12px; }
.s18 { padding: 0 clamp(20px,5vw,48px) clamp(56px,9vw,96px); }
.s19 { font-size: clamp(26px,3.4vw,32px); font-weight: 400; line-height: 1.2; color: #181d26; margin: 0 0 32px; }
.s20 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.s21 { background: #f8fafc; border-radius: 12px; padding: 32px; }
.s22 { font-size: 20px; font-weight: 500; line-height: 1.4; color: #181d26; margin: 0 0 12px; }
.s23 { font-size: 14px; line-height: 1.6; color: #333840; margin: 0; }
.s24 { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.s25 { background: #5852C6; color: #ffffff; border-radius: 12px; padding: clamp(28px,4vw,48px); display: flex; flex-direction: column; }
.s26 { font-size: 14px; font-weight: 500; letter-spacing: 0.16px; margin: 0 0 16px; color: #ffffff; opacity: 0.85; }
.s27 { font-size: clamp(24px,3vw,32px); font-weight: 400; line-height: 1.2; margin: 0 0 16px; color: #ffffff; }
.s28 { font-size: 15px; line-height: 1.6; margin: 0 0 32px; color: #ffffff; max-width: 42ch; }
.s29 { align-self: flex-start; margin-top: auto; background: #ffffff; color: #181d26; font-size: 16px; font-weight: 500; padding: 16px 24px; border-radius: 12px; }
.s30 { background: #181d26; color: #ffffff; border-radius: 12px; padding: clamp(28px,4vw,48px); display: flex; flex-direction: column; }
.s31 { align-self: flex-start; margin-top: auto; border: 1px solid #F4C056; color: #F4C056; font-size: 16px; font-weight: 500; padding: 16px 24px; border-radius: 12px; }
.s32 { max-width: 1280px; margin: 0 auto; background: #E6EEFD; border-radius: 12px; padding: clamp(28px,4vw,48px); }
.s33 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.s34 { font-size: 14px; line-height: 1.6; color: #333840; margin: 0; max-width: 48ch; }
.s35 { max-width: 1280px; margin: 0 auto; background: #AFDCE1; border-radius: 12px; padding: clamp(28px,4vw,48px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.s36 { background: #181d26; color: #ffffff; font-size: 16px; font-weight: 500; padding: 16px 24px; border-radius: 12px; white-space: nowrap; }
.s37 { border-top: 1px solid #dddddd; background: #ffffff; padding: clamp(40px,6vw,64px) clamp(20px,5vw,48px) 32px; }
.s38 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.s39 { display: inline-flex; flex-direction: column; align-items: stretch; gap: 0px; margin-bottom: 16px; }
.s40 { font-size: 16px; font-weight: 500; color: #181d26; }
.s41 { font-size: 14px; line-height: 1.6; color: #41454d; margin: 0; max-width: 34ch; }
.s42 { display: flex; flex-direction: column; gap: 10px; }
.s43 { font-size: 14px; font-weight: 500; color: #181d26; margin: 0 0 4px; }
.s44 { font-size: 14px; color: #41454d; }
.s45 { font-size: 14px; line-height: 1.6; color: #41454d; }
.s46 { font-size: 14px; color: #41454d; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid #dddddd; }
.s47 { font-size: clamp(24px,3.2vw,30px); font-weight: 400; line-height: 1.4; color: #181d26; margin: 0 0 32px; }
.s48 { font-size: 19px; font-weight: 500; line-height: 1.6; color: #181d26; margin: 0 0 12px; }
.s49 { font-size: 15px; line-height: 1.85; color: #333840; margin: 0; }
.s50 { font-size: clamp(24px,3vw,32px); font-weight: 400; line-height: 1.3; margin: 0 0 16px; color: #ffffff; }
.s51 { font-size: 16px; line-height: 1.85; margin: 0 0 32px; color: #ffffff; max-width: 44ch; }
.s52 { font-size: 15px; line-height: 1.85; color: #333840; margin: 0; max-width: 50ch; }
.s53 { font-size: 15px; line-height: 1.85; color: #41454d; margin: 0; max-width: 34ch; }
.s54 { font-size: 15px; font-weight: 500; color: #181d26; margin: 0 0 4px; }
.s55 { font-size: 15px; color: #41454d; }
.s56 { font-size: 15px; line-height: 1.85; color: #41454d; }
.s57 { padding: clamp(48px,7vw,80px) clamp(20px,5vw,48px) 48px; }
.s58 { padding: 0 clamp(20px,5vw,48px) 24px; }
.s59 { max-width: 1280px; margin: 0 auto; background: #5852C6; color: #ffffff; border-radius: 12px; padding: clamp(28px,4vw,48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.s60 { font-size: clamp(26px,3.4vw,32px); font-weight: 400; line-height: 1.2; margin: 0 0 16px; color: #ffffff; }
.s61 { display: inline-block; background: #ffffff; color: #181d26; font-size: 16px; font-weight: 500; padding: 16px 24px; border-radius: 12px; }
.s62 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; align-self: center; }
.s63 { font-size: 15px; line-height: 1.6; color: #ffffff; border-top: 1px solid #AAB6F3; padding-top: 16px; }
.s64 { max-width: 1280px; margin: 0 auto; background: #181d26; color: #ffffff; border-radius: 12px; padding: clamp(28px,4vw,48px); }
.s65 { display: inline-block; border: 1px solid #F4C056; color: #F4C056; font-size: 16px; font-weight: 500; padding: 16px 24px; border-radius: 12px; }
.s66 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.s67 { border-top: 3px solid #F4C056; padding-top: 20px; }
.s68 { font-size: 14px; font-weight: 500; letter-spacing: 0.16px; color: #41454d; margin: 0 0 12px; }
.s69 { border-top: 1px solid #dddddd; padding-top: 20px; }
.s70 { font-size: clamp(28px,4.4vw,38px); font-weight: 400; line-height: 1.35; color: #181d26; margin: 0; max-width: 24ch; }
.s71 { font-size: clamp(26px,3.4vw,32px); font-weight: 400; line-height: 1.3; margin: 0 0 16px; color: #ffffff; }
.s72 { font-size: 16px; line-height: 1.85; color: #ffffff; border-top: 1px solid #AAB6F3; padding-top: 16px; }
.s73 { padding: clamp(48px,7vw,80px) clamp(20px,5vw,48px) clamp(40px,6vw,64px); }
.s74 { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: center; }
.s75 { font-size: clamp(30px,4.6vw,40px); font-weight: 400; line-height: 1.15; color: #181d26; margin: 0; max-width: 20ch; }
.s76 { display: flex; justify-content: center; }
.s77 { width: 100%; max-width: 340px; height: auto; display: block; }
.s78 { font-size: 14px; font-weight: 500; letter-spacing: 0.16px; color: #41454d; margin: 0 0 8px; }
.s79 { font-size: 16px; line-height: 1.6; color: #181d26; margin: 0; }
.s80 { font-size: 16px; line-height: 1.85; color: #181d26; margin: 0; }
.s81 { padding: clamp(48px,7vw,80px) clamp(20px,5vw,48px) clamp(56px,9vw,96px); }
.s82 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 48px; }
.s83 { font-size: 20px; line-height: 1.4; color: #5852C6; }
.s84 { font-size: 16px; color: #5852C6; }

/* --- generated: hover declarations lifted from the design --- */
.hv0:hover { background: #0d1218; color: #ffffff; }
.hv1:hover { border-color: #9297a0; color: #181d26; }
.hv2:hover { background: #E6EEFD; color: #181d26; }