/* Acumano website prototype, revision 3 (with the revision-4 bakery image direction).
   Core colours and type from Acumano Brand Assets. --sand is sampled from the two Higgsfield clips
   and is used only behind the workflow, so the clips blend in. */

:root {
  --paper: #F7F4EF;
  --soft: #EFEBE3;
  --sand: #EDE1D1;
  --white: #FFFFFF;
  --ink: #141A18;
  --muted: #5A6560;
  --muted-on-sand: #535D58;
  --teal: #1F5F4A;
  --forest: #17493A;
  --amber: #C8752F;
  --field: #847D72;
  --rule: #DDD7CC;
  --on-dark: #F2EFE9;
  --teal-on-dark: #6FBFA3;
  --error: #A03024;

  --font-head: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-social: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gutter: 24px;
  /* Spacing: each section pads its top and bottom by --space-section, so neighbouring sections sit
     2 × that apart: about 48 px on a 390 px phone, rising to 80 px at 1440 px.
     --space-related separates a heading from its own content; --space-steps separates items in a series. */
  --space-section: clamp(24px, 18px + 1.52vw, 40px);
  --space-related: clamp(24px, 19px + 1.4vw, 40px);
  --space-steps: clamp(40px, 34px + 1.5vw, 56px);
  --shadow-sm: 0 1px 2px rgba(20, 26, 24, .06), 0 10px 28px -14px rgba(20, 26, 24, .22);
  /* Type scale: phone value at 390 px, growing smoothly to the desktop value at 1280 px.
     Space Grotesk for headings, DM Sans for everything else. */
  --fs-hero: clamp(41px, 33.5px + 1.91vw, 58px);      /* hero headline: 58 / 41 */
  --fs-h2: clamp(31px, 27px + 1.01vw, 40px);          /* section headings: 40 / 31 */
  --fs-h3: clamp(21px, 19.7px + .34vw, 24px);         /* short feature headings: 24 / 21 */
  --fs-intro: clamp(18px, 17.1px + .225vw, 20px);     /* intro lines: 20 / 18 */
  --fs-list: clamp(16px, 15.1px + .225vw, 18px);      /* benefit lists: 18 / 16 */
  --fs-body: clamp(16px, 15.56px + .112vw, 17px);     /* body text: 17 / 16 */
  --fs-small: 14px;                                   /* notes and labels */
  --lh-hero: 1.06; --lh-h2: 1.12; --lh-h3: 1.25; --lh-intro: 1.5; --lh-body: 1.6;
  --shadow-post: 0 1px 2px rgba(20, 26, 24, .08), 0 16px 34px -18px rgba(20, 26, 24, .35);
}
@media (max-width: 859px) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
html.rm { scroll-behavior: auto; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--teal); }
p, h1, h2, h3 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.center { text-align: center; }

/* ---------- Type ---------- */
.display { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: -0.034em; text-wrap: balance; }
.display span { display: block; }
.h2 { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.028em; text-wrap: balance; }
.h3 { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-h3); letter-spacing: -0.02em; }
.lead { font-size: var(--fs-intro); line-height: var(--lh-intro); color: var(--muted); max-width: 30em; }
.sub { font-size: var(--fs-intro); line-height: var(--lh-intro); color: var(--muted); margin-top: 14px; max-width: 34em; text-wrap: pretty; }
.center .sub { margin-left: auto; margin-right: auto; }
.fineprint { font-size: var(--fs-small); color: var(--muted); }
.section-head { margin-bottom: var(--space-related); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 24px; border: 1.5px solid transparent; border-radius: 999px; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .18s, color .18s; }
.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: var(--forest); }
.btn-outline { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-outline:hover { background: rgba(31, 95, 74, .07); }
.btn-lg { min-height: 54px; padding: 15px 30px; font-size: 17px; }
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 15px; }
.btn-block { width: 100%; }
.text-link { color: var(--teal); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(247, 244, 239, .88); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.header-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand img { height: 44px; width: auto; margin: -6px 0 -6px -8px; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 28px; }
.nav a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; opacity: .8; }
.nav a:hover { opacity: 1; }
.menu-toggle { display: none; }
@media (max-width: 859px) {
  .header-inner { gap: 10px; height: 60px; }
  .brand img { height: 36px; }
  .header-cta { margin-left: auto; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 12px; background: transparent; border: 1.5px solid var(--rule); border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; }
  .menu-icon, .menu-icon::before { display: block; width: 14px; height: 1.75px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .2s; }
  .menu-icon::before { content: ''; position: absolute; top: 5px; }
  .menu-icon { transform: translateY(-2.5px); }
  .menu-toggle[aria-expanded='true'] .menu-icon { transform: rotate(45deg); }
  .menu-toggle[aria-expanded='true'] .menu-icon::before { transform: translateY(-5px) rotate(-90deg); }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 20px; display: none; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: 14px 0; font-size: 19px; font-weight: 600; opacity: 1; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 380px) { .menu-label { display: none; } }

/* ---------- Post previews (HTML frames; the images are illustrative samples) ---------- */
.fbp, .igp { background: var(--white); border-radius: 1em; box-shadow: var(--shadow-post); overflow: hidden; font-family: var(--font-social); color: #1C1E21; line-height: 1.35; }
.p-head { display: flex; align-items: center; gap: .6em; padding: .8em .9em .65em; }
.p-av { width: 2.5em; height: 2.5em; border-radius: 50%; flex: none; }
.p-av.ring { width: 2.3em; height: 2.3em; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #D6249F; }
.p-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.p-who b { font-size: 1em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-who span { display: flex; align-items: center; gap: .3em; font-size: .85em; color: #65676B; }
.p-globe { width: .9em; height: .9em; color: #65676B; }
.p-more { margin-left: auto; color: #65676B; font-weight: 700; letter-spacing: .05em; }
.fbp-text { padding: 0 .9em; margin-bottom: .7em; font-size: 1em; }
.p-img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--soft); }
.fbp-actions { display: flex; justify-content: space-around; gap: .4em; padding: .55em .3em; margin: 0 .6em; border-top: 1px solid #E4E6EB; color: #65676B; font-size: .92em; font-weight: 600; white-space: nowrap; }
.is-mini .fbp-actions, .is-draft .fbp-actions { font-size: .82em; }
.fbp-actions span { display: inline-flex; align-items: center; gap: .35em; }
.fbp-actions svg { width: 1.2em; height: 1.2em; }
.igp-icons { display: flex; gap: .85em; padding: .7em .9em .35em; color: #262626; }
.igp-icons svg { width: 1.6em; height: 1.6em; }
.igp-icons .save { margin-left: auto; }
.igp-text { padding: 0 .9em; margin-bottom: .9em; font-size: 1em; }
.igp-text .tags { color: #00376B; }
/* sizes */
.post-slot { font-size: 15px; min-width: 0; }
.post-slot.is-mini { font-size: 11.5px; }
.post-slot.is-mini .fbp-text, .post-slot.is-mini .igp-text, .post-slot.is-draft .fbp-text, .post-slot.is-draft .igp-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-slot.is-draft { font-size: 12px; }
.is-mini .p-more, .is-draft .p-more { display: none; }
.draft-tools { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; margin-top: 10px; }
.draft-tools .fake-btn.quiet { padding: 5px 9px; font-size: 12px; }
.draft-chip { padding: 3px 9px; border-radius: 999px; background: #F6EBDD; color: #7A4A16; font-size: 12.5px; font-weight: 700; }
.sample-tag { font-size: var(--fs-small); color: var(--muted); text-align: center; }

/* ---------- 1. Hero ---------- */
.hero { padding: clamp(28px, 4vw, 56px) 0 var(--space-section); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.status-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; margin-bottom: 24px; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.hero .lead { margin-top: 24px; }
.hero-actions { margin-top: 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.hero-visual { position: relative; margin: 0; height: 600px; }
.hero-posts { position: absolute; left: 0; top: 0; width: 62%; display: flex; gap: 4%; align-items: flex-start; z-index: 2; }
.hero-posts .post-slot { width: 48%; }
.hero-posts .slot-ig { margin-top: 34px; }
.cloud { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.hero-agent { position: absolute; right: -2%; bottom: 26px; width: 68%; z-index: 0; }
.hero-mascot { width: 100%; }
.bubble { position: absolute; z-index: 3; right: 0; top: -27%; width: 13.2em; padding: 13px 17px; border-radius: 22px 22px 22px 6px; background: var(--white); box-shadow: var(--shadow-sm); font-size: 16px; font-weight: 500; line-height: 1.4; }
.hero-visual .sample-tag { position: absolute; left: 0; right: 0; bottom: 0; }

@media (max-width: 1023px) and (min-width: 860px) {
  .hero-visual { height: 520px; }
  .bubble { font-size: 15px; }
}
@media (max-width: 859px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { height: auto; display: grid; grid-template-columns: 1fr; margin-top: 8px; }
  .hero-posts { position: relative; width: 100%; gap: 12px; }
  .hero-posts .post-slot { width: calc(50% - 6px); }
  .hero-posts .slot-ig { margin-top: 22px; }
  .hero-posts { margin-bottom: 18px; }
  .hero-agent { position: relative; right: auto; bottom: auto; width: 100%; display: flex; flex-direction: column; align-items: flex-end; }
  .hero-mascot { width: 84%; margin-right: -4%; }
  .bubble { position: relative; right: auto; top: auto; width: auto; max-width: 20em; margin-top: -6px; font-size: 15px; padding: 11px 15px; border-radius: 20px 6px 20px 20px; }
  .hero-visual .sample-tag { position: static; margin-top: 4px; }
}

/* ---------- Who: three columns (from section-2-options/reference-style.html) ---------- */
.who { padding: 0 0 var(--space-section); }
.who > .wrap { padding-top: var(--space-section); border-top: 1px solid var(--rule); text-align: center; }
.who-head .sub { margin-left: auto; margin-right: auto; }
.who-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4.5vw, 56px); margin-top: var(--space-related); }
.who-item { display: flex; flex-direction: column; align-items: center; }
.who-circle { --tint: #E8F0E9; --line: var(--teal); position: relative; width: 178px; height: 178px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; }
.who-item.warm .who-circle { --tint: #F7EADC; --line: #A76127; }
.who-circle svg { width: 100px; height: 100px; fill: none; stroke: var(--line); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.who-circle svg .fill { fill: var(--tint); }
.who-num { position: absolute; right: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--amber); color: #fff; display: grid; place-items: center; font: 700 21px/1 var(--font-head); box-shadow: 0 6px 14px rgba(200, 117, 47, .23); }
.who-title { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-head); letter-spacing: -0.02em; margin-top: 24px; }
.who-item p { margin-top: 8px; font-size: var(--fs-list); color: var(--muted); line-height: 1.45; max-width: 18em; }
@media (max-width: 749px) {
  .who-items { grid-template-columns: 1fr; gap: 42px; }
  .who-circle { width: 148px; height: 148px; }
  .who-circle svg { width: 85px; height: 85px; }
  .who-title { margin-top: 18px; }
}

/* ---------- 2–4. How Acumano helps ---------- */
.help { background: var(--sand); padding: var(--space-section) 0; }
.help .sub { color: var(--muted-on-sand); }
.help-intro { max-width: 36em; }
.flow { display: flex; flex-direction: column; gap: var(--space-steps); margin-top: var(--space-related); }
.flow-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.row-2 { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.row-2 .flow-text { order: 2; }
.row-2 .flow-visual { order: 1; }
.flow-text { max-width: 28em; }
.flow-text p { margin-top: 10px; font-size: var(--fs-body); color: var(--muted-on-sand); }
.step-num { font-size: 16px; display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; border: 1.5px solid var(--teal); color: var(--teal); font-weight: 600; }
.flow-visual { margin: 0; position: relative; }
.flow-visual .sample-tag { margin-top: 14px; color: var(--muted-on-sand); }
@media (max-width: 859px) {
  .flow-row, .row-2 { grid-template-columns: 1fr; gap: 22px; }
  .row-2 .flow-text, .row-2 .flow-visual { order: initial; }
}

/* the Higgsfield clips: no box; edges fade into the sand */
.clip { position: relative; }
.clip video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: transparent;
  -webkit-mask-image: radial-gradient(ellipse 52% 58% at 50% 50%, #000 68%, transparent 100%);
  mask-image: radial-gradient(ellipse 52% 58% at 50% 50%, #000 68%, transparent 100%); }
.clip-typing video { filter: brightness(1.008) saturate(.84); }

/* step 1 */
.composer { background: var(--white); border-radius: 22px; box-shadow: var(--shadow-sm); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.composer-label { font-size: 15px; font-weight: 600; }
.composer-input { min-height: 80px; padding: 12px 14px; border: 1.5px solid var(--field); border-radius: 12px; font-size: 16px; line-height: 1.5; }
.composer-row { display: flex; gap: 8px; flex-wrap: wrap; }
.composer .fake-btn { align-self: flex-start; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.chip svg { width: 14px; height: 14px; }
.chip-ok { background: #E3EFE9; color: var(--teal); }
.fake-btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: 999px; background: var(--teal); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.fake-btn.quiet { background: var(--white); color: var(--ink); border: 1.5px solid var(--rule); font-size: 12.5px; padding: 5px 11px; }

/* step 2: drafts rise from the laptop on a soft cloud */
.prep { display: flex; flex-direction: column; align-items: center; }
.prep-drafts { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: min(100%, 470px); }
.prep-drafts .post-slot:last-child { margin-top: 26px; }
.clip-typing { width: 88%; margin-top: -24px; align-self: flex-start; }

/* hero: the same approved image, shown whole beside the text (below it on phone) */
.hero .hero-visual { height: auto; display: flex; flex-direction: column; gap: 12px; }
.hero-img { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 28px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent); mask-composite: intersect; }
.hero .hero-visual .sample-tag { position: static; }
@media (max-width: 859px) { .hero-img { border-radius: 18px; } .hero .hero-visual { margin-top: 32px; } }

/* steps 1–3: one shared visual frame, sized from the Step 1 form.
   Desktop 460 × 259 (16:9); phone full width at 4:3. Images are never cropped past their margins. */
.composer, .review-img, .publish-img { width: min(100%, 460px); aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 22px; }
.composer { justify-content: center; }
.review-img { display: block; height: auto; object-fit: cover; box-shadow: var(--shadow-sm); }
.publish-img { display: block; height: auto; object-fit: contain; background: linear-gradient(#EDDECB, #EADBC8); /* matches the image’s own edges, so letterboxing is invisible */ box-shadow: var(--shadow-sm); }
@media (max-width: 859px) {
  .composer, .review-img, .publish-img { width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; }
  .review-img { object-position: 42% 50%; }
}

/* ---------- Sample ---------- */
.sample { padding: var(--space-section) 0; }
.sample-label { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 9px 14px; border-radius: 16px; background: #F6EBDD; color: #7A4A16; font-size: 14.5px; font-weight: 600; text-align: left; max-width: 44em; }
.sample-label svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.topic-line { text-align: center; margin: 0 auto clamp(32px, 4vw, 48px); max-width: 36em; }
.topic-who { font-size: 14px; color: var(--muted); }
.topic-text { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 500; margin-top: 6px; text-wrap: balance; }
.sample-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); max-width: 940px; margin: 0 auto; align-items: start; }
.sample-col { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sample-cap { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pf { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; flex: none; font: 700 13px/1 var(--font-social); color: #fff; }
.pf-fb { background: #1877F2; border-radius: 50%; }
.pf-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.pf-ig::after { content: ''; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; }
@media (max-width: 719px) { .sample-pair { grid-template-columns: 1fr; max-width: 460px; } }

/* ---------- 5. Mission (light, from section-2-options/small-business-light.html) ---------- */
.mission { background: var(--paper); color: var(--ink); }
.mission-inner { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1.03fr 1fr; align-items: center; gap: clamp(35px, 6vw, 100px); padding: var(--space-section) var(--gutter); }
/* the storefront's cream background melts into the page: multiply blend plus a soft oval fade */
/* the storefront's soft fade already adds air above and below, so trim the padding where the image is the edge */
@media (min-width: 801px) { .mission-inner { padding-block: max(8px, calc(var(--space-section) - 28px)); } }
@media (max-width: 800px) { .mission-inner { padding-top: max(8px, calc(var(--space-section) - 22px)); } }
/* soft fade on all four edges (wide top and bottom over empty sky and pavement, narrow at the sides),
   so the cream background melts into the page and the source file's rounded corners disappear */
.mission-media { margin: 0; position: relative; }
.mission-media img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; /* trims empty sky and ground only */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 88%, transparent 100%);
  mask-composite: intersect; }
.mission .h2 { color: var(--teal); font-weight: 700; margin-bottom: 24px; }
.mission-points { margin-top: 0; display: grid; gap: 16px; }
.mission-points li { display: flex; align-items: flex-start; gap: 14px; font-size: var(--fs-list); line-height: 1.45; font-weight: 400; color: #253D32; }
.mission-points svg { width: 26px; height: 26px; flex: none; padding: 6px; border-radius: 50%; background: #DCECE2; color: var(--teal); margin-top: 0; }
@media (max-width: 800px) {
  .mission-inner { grid-template-columns: 1fr; gap: 16px; }
  .mission-media { max-width: 520px; width: 100%; margin: 0 auto; }
  .mission-copy { padding: 0 3vw; }
  .mission .h2 { margin-bottom: 20px; }
  .mission-points { gap: 14px; }
}

/* ---------- 6. Packages ---------- */
.packages { padding: var(--space-section) 0; }
/* desktop: fixed two-line break; phone: wraps naturally */
@media (min-width: 860px) {
  .packages-sub { max-width: none; }
  .packages-sub .ps-1 { white-space: nowrap; }
  .packages-sub .ps-2 { display: block; }
}
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
.plan { background: var(--white); border: 1px solid var(--rule); border-radius: 26px; padding: 32px 28px 28px; display: flex; flex-direction: column; }
.plan-name { font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; letter-spacing: -0.02em; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 22px; }
.plan-price .amt { font-family: var(--font-head); font-weight: 600; font-size: 3rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan-price .per { color: var(--muted); font-size: 15px; }
.plan-list { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--rule); margin-bottom: 28px; flex: 1; }
.plan-list li { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: var(--fs-body); }
@media (min-width: 860px) and (max-width: 1100px) { .plan-list li { font-size: 14.5px; } }
.plan-list b { font-variant-numeric: tabular-nums; }
.plan .btn { width: 100%; }
.packages .fineprint { margin-top: 24px; }
/* credits information control */
.info { position: relative; display: inline-flex; }
.info-btn { width: 24px; height: 24px; display: inline-grid; place-items: center; border: 1.5px solid var(--field); border-radius: 50%; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; }
.info-btn:hover, .info-btn[aria-expanded='true'] { border-color: var(--teal); color: var(--teal); }
.info-tip { white-space: normal; position: absolute; z-index: 10; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 230px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: var(--white); font-size: var(--fs-small); font-weight: 500; line-height: 1.4; box-shadow: var(--shadow-sm); }
.info-tip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
@media (max-width: 859px) { .plans { grid-template-columns: 1fr; max-width: 460px; } .info-tip { left: auto; right: -12px; transform: none; } .info-tip::after { left: auto; right: 18px; } }

/* ---------- 7. FAQ ---------- */
.faq { padding: 0 0 var(--space-section); }
.faq-grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(32px, 6vw, 96px); padding-top: var(--space-section); border-top: 1px solid var(--rule); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list details:first-child { border-top: 1px solid var(--rule); }
.faq-list summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-size: var(--fs-list); line-height: 1.4; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after, .faq-list summary::before { content: ''; position: absolute; right: 8px; top: 50%; width: 14px; height: 2px; background: var(--teal); border-radius: 2px; transition: transform .2s; }
.faq-list summary::before { transform: rotate(90deg); }
.faq-list details[open] summary::before { transform: rotate(0); }
.faq-list details p { padding: 0 44px 22px 0; font-size: var(--fs-body); color: var(--muted); max-width: 38em; }
@media (max-width: 859px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- 8. Final enquiry ---------- */
.enquire { background: var(--soft); padding: var(--space-section) 0; }
.enquire-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.enquire-copy { position: relative; }
.enquire-copy p { margin-top: 16px; color: var(--muted); font-size: var(--fs-intro); line-height: var(--lh-intro); max-width: 26em; }
.enquire-mascot { width: min(100%, 440px); margin-top: 28px; margin-left: -4%; }
.form-card { background: var(--white); border-radius: 28px; padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-sm); }
@media (max-width: 859px) {
  .enquire-grid { grid-template-columns: 1fr; }
  .enquire-mascot { width: 76%; margin: 16px auto -8px 0; }
}

/* ---------- Footer ---------- */
.site-footer { padding: 40px 0 48px; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--muted); }
.footer-inner { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.footer-logo { height: 26px; width: auto; }
.footer-legal { color: var(--ink); }
.site-footer nav { margin-left: auto; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); }
.footer-copy { width: 100%; }
@media (max-width: 719px) { .footer-inner { flex-direction: column; align-items: flex-start; } .site-footer nav { margin-left: 0; } }

/* ---------- Form and dialog ---------- */
.demo-form { display: flex; flex-direction: column; gap: 18px; }
.form-intro { color: var(--muted); }
.form-package { font-size: 15px; padding: 10px 14px; background: #E3EFE9; border-radius: 12px; color: var(--teal); }
.form-fields { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 15px; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); padding: 12px 14px; border: 1.5px solid var(--field); border-radius: 12px; background: var(--white); }
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); border-radius: 12px; }
.field input[aria-invalid='true'] { border-color: var(--error); border-width: 2px; }
.field-hint { font-size: var(--fs-small); color: var(--muted); }
.field-err { font-size: var(--fs-small); color: var(--error); font-weight: 600; display: flex; gap: 6px; }
.field-err::before { content: '!'; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--error); color: #fff; font-size: 12px; font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-alert { padding: 14px 16px; border-radius: 12px; background: #FBEDEA; border-left: 4px solid var(--error); font-size: 15px; }
.form-alert b { display: block; color: var(--error); margin-bottom: 2px; }
.form-alert:focus { outline: 3px solid var(--error); outline-offset: 2px; }
.form-privacy { font-size: var(--fs-small); color: var(--muted); }
.spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; }
html.rm .spinner { animation-duration: 2.4s; }
.demo-form.is-submitting .spinner { display: inline-block; }
.demo-form.is-submitting .form-fields { opacity: .72; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-success { text-align: center; padding: 24px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.form-success:focus { outline: none; }
.success-icon { width: 56px; height: 56px; fill: #E3EFE9; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.success-icon circle { stroke: none; }
.success-title { font-family: var(--font-head); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.form-success p { color: var(--muted); max-width: 26em; }
.demo-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 28px; border: 0; border-radius: 28px; background: var(--white); color: var(--ink); box-shadow: 0 40px 90px -20px rgba(20, 26, 24, .45); }
.demo-dialog::backdrop { background: rgba(20, 26, 24, .48); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dlg-title { font-family: var(--font-head); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
.dlg-close { width: 44px; height: 44px; margin: -8px -8px 0 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.dlg-close svg { width: 20px; height: 20px; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
@media (max-width: 559px) { .demo-dialog { padding: 22px 18px; border-radius: 22px; } }

/* ---------- Asset labels (prototype only) ---------- */
.asset-tag { position: absolute; z-index: 6; left: 0; top: 0; max-width: 300px; padding: 6px 10px; border: 1.5px dashed var(--amber); border-radius: 10px; background: #FFF8EF; color: #6B3F12; font: 500 12.5px/1.35 var(--font-body); }
html:not(.show-notes) .asset-tag { display: none; }

/* ---------- Prototype controls ---------- */
.proto { position: fixed; right: 16px; bottom: 16px; z-index: 60; }
.proto-toggle { min-height: 40px; padding: 8px 16px; border-radius: 999px; cursor: pointer; background: #FFF8EF; color: #6B3F12; border: 2px dashed var(--amber); font-weight: 700; font-size: 14px; }
.proto-panel { position: absolute; right: 0; bottom: calc(100% + 10px); width: 290px; background: #FFF8EF; border: 2px dashed var(--amber); border-radius: 16px; padding: 14px 16px; font-size: 14px; color: #3D2A14; box-shadow: var(--shadow-sm); }
.proto-panel fieldset { border: 0; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.proto-panel legend { font-weight: 700; margin-bottom: 4px; }
.proto-panel label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.proto-note { font-size: 13px; color: #6B3F12; }
.proto-links { margin-top: 12px; }
.proto-links a { color: #6B3F12; font-weight: 600; }
.proto-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70; background: #FFF8EF; color: #3D2A14; border: 2px dashed var(--amber); border-radius: 12px; padding: 10px 16px; font-size: 14px; max-width: calc(100% - 32px); }
html.no-proto .proto, html.no-proto .proto-toast { display: none; }

/* ---------- Analytics consent (consent.js) ---------- */
.footer-link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.footer-link-btn:hover { color: var(--ink); }
.consent { position: fixed; z-index: 80; left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin: 0 auto;
  background: var(--white); border: 1px solid var(--rule); border-radius: 22px; box-shadow: 0 24px 60px -24px rgba(20, 26, 24, .35); }
.consent-inner { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: center; padding: 20px 22px; }
.consent-title { font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; letter-spacing: -0.02em; }
.consent-title:focus { outline: none; }
.consent-text p { margin-top: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.consent-text a { color: var(--teal); }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* both choices look the same, so neither is nudged */
.consent-btn { min-width: 180px; width: 100%; background: var(--white); color: var(--teal); border-color: var(--teal); }
.consent-btn:hover { background: rgba(31, 95, 74, .07); }
.consent-btn[aria-pressed='true'] { background: var(--teal); color: var(--white); }
.consent-status { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--muted); }
.consent-status:empty { display: none; }
@media (max-width: 719px) {
  .consent { left: 12px; right: 12px; bottom: 12px; border-radius: 18px; }
  .consent-inner { grid-template-columns: 1fr; padding: 18px; }
  .consent-actions { grid-template-columns: 1fr; }
  .consent-btn { width: 100%; min-width: 0; }
}

/* ---------- Footer: company link, Follow us (approved 2026-10-10) ---------- */
.footer-legal a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.footer-legal a:hover { text-decoration-color: currentColor; }
.footer-bottom { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; }
.footer-bottom .footer-copy { width: auto; }
.footer-social { display: flex; align-items: center; gap: 12px; margin-left: 0; }
.footer-social-label { color: var(--muted); }
.footer-social ul { display: flex; gap: 8px; }
.footer-social a { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--rule); border-radius: 50%; color: var(--muted); text-decoration: none; transition: color .15s, border-color .15s, background-color .15s; }
.footer-social a:hover { color: var(--teal); border-color: var(--teal); background: rgba(31, 95, 74, .06); }
.footer-social a:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 719px) {
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
  .footer-social a { width: 40px; height: 40px; }
  .footer-links { gap: 8px 20px; }
}