/* freeundangan app styles: Buku Tamu world over Pico CSS 2.
   Source of truth for decisions: docs/brand.md. Load after pico.min.css, with <html data-theme="light">. */

/* ---------- Fonts (self-hosted, OFL, latin subset) ---------- */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Young Serif";
  src: url("fonts/young-serif-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* shortcut: fallback metrics are estimates against Arial; re-measure if swap shift is visible on real devices. */
@font-face {
  font-family: "Hanken Grotesk Fallback";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 96%;
  ascent-override: 102%;
  descent-override: 26%;
}

/* ---------- Tokens ---------- */
:root {
  /* palette roles */
  --fu-velvet: #111111;          /* dark bands (editor header, card heads); neutral since the Waymark-style pass 2026-10-21 */
  --fu-velvet-deep: #000000;
  --fu-on-velvet: #ffffff;
  --fu-on-velvet-muted: #d4d4d4;
  --fu-page: #ffffff;
  --fu-surface: #ffffff;
  --fu-surface-sunk: #f7f7f8;
  --fu-ink: #0a0a0a;
  --fu-ink-muted: #6b6b6b;       /* 5.3:1 on white, 5:1 on sunk */
  --fu-pen: #be2c6b;             /* premium pink (primary): buttons, links, typed names, focus; 5.6:1 with white, 5.4:1 on the page */
  --fu-pen-hover: #9e2157;
  --fu-pen-tint: #fbe6ef;
  --fu-gilt: #b8893a;
  --fu-rule: #e5e5e5;
  --fu-rule-strong: #8a8a8a;   /* ≥3:1 on page, surface and sunk: control borders and the empty signature line */
  --fu-error: #b42318;
  --fu-error-tint: #fdf1f0;
  --fu-notice: #7a4a00;
  --fu-notice-tint: #fff5e1;
  --fu-on-velvet-hover: #f2f2f3;  /* hover fill for white buttons on velvet */
  /* WhatsApp's light palette, only where we depict their app (publish card, homepage demo). */
  --fu-wa-bg: #efeae2;
  --fu-wa-head: #008069;
  --fu-wa-bubble: #d9fdd3;
  --fu-wa-avatar: #dfe5e7;
  --fu-wa-meta: #4f5b55;
  --fu-wa-link: #035e86;
  --fu-wa-tick: #53bdeb;

  /* type roles */
  --fu-font: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fu-font-name: "Young Serif", Georgia, "Times New Roman", serif;
  --fu-text-meta: 0.875rem;    /* 14px: status, hints, timestamps (type scale after freekasir.com, 2026-10-23) */
  --fu-text-body: 1rem;        /* 16px: body, labels, inputs, buttons */
  --fu-text-heading: 1.25rem;  /* 20px: block and page headings */
  --fu-text-name: 1.875rem;    /* 30px: couple name, publish moment */

  /* space and shape */
  --fu-space-1: 0.25rem;
  --fu-space-2: 0.5rem;
  --fu-space-3: 0.75rem;
  --fu-space-4: 1rem;
  --fu-space-5: 1.5rem;
  --fu-space-6: 2rem;
  --fu-space-7: 3rem;
  --fu-radius: 0.625rem;
  --fu-touch: 3rem;            /* 48px minimum target */
  --fu-gutter: 1.25rem;
  --fu-line-draw: 240ms;
  --fu-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Pico mapping: light only in MVP (use scene is indoor daytime/evening on phones). */
:root[data-theme="light"] {
  --pico-font-family: var(--fu-font);
  --pico-font-family-sans-serif: var(--fu-font);
  --pico-font-size: 100%;
  --pico-line-height: 1.5;
  --pico-font-weight: 450;
  --pico-border-radius: var(--fu-radius);
  --pico-spacing: var(--fu-space-4);
  --pico-typography-spacing-vertical: var(--fu-space-4);
  --pico-form-element-spacing-vertical: 0.75rem;
  --pico-form-element-spacing-horizontal: 0.875rem;
  --pico-form-label-font-weight: 600;
  --pico-transition: 160ms var(--fu-ease-out);

  --pico-background-color: var(--fu-page);
  --pico-color: var(--fu-ink);
  --pico-h1-color: var(--fu-ink);
  --pico-h2-color: var(--fu-ink);
  --pico-h3-color: var(--fu-ink);
  --pico-muted-color: var(--fu-ink-muted);
  --pico-muted-border-color: var(--fu-rule);
  --pico-border-color: var(--fu-rule);
  --pico-text-selection-color: var(--fu-pen-tint);

  --pico-primary: var(--fu-pen);
  --pico-primary-underline: color-mix(in srgb, var(--fu-pen) 45%, transparent);
  --pico-primary-hover: var(--fu-pen-hover);
  --pico-primary-hover-underline: var(--fu-pen-hover);
  --pico-primary-focus: color-mix(in srgb, var(--fu-pen) 28%, transparent);
  --pico-primary-background: var(--fu-pen);
  --pico-primary-border: var(--fu-pen);
  --pico-primary-hover-background: var(--fu-pen-hover);
  --pico-primary-hover-border: var(--fu-pen-hover);
  --pico-primary-inverse: var(--fu-on-velvet);

  --pico-secondary: var(--fu-ink-muted);
  --pico-secondary-background: var(--fu-surface);
  --pico-secondary-border: var(--fu-rule-strong);
  --pico-secondary-hover-background: var(--fu-surface-sunk);
  --pico-secondary-hover-border: var(--fu-ink-muted);
  --pico-secondary-inverse: var(--fu-ink);
  --pico-secondary-hover: var(--fu-ink);

  --pico-form-element-background-color: var(--fu-surface);
  --pico-form-element-active-background-color: var(--fu-surface);
  --pico-form-element-border-color: var(--fu-rule-strong);
  --pico-form-element-active-border-color: var(--fu-pen);
  --pico-form-element-focus-color: color-mix(in srgb, var(--fu-pen) 28%, transparent);
  --pico-form-element-color: var(--fu-pen);
  --pico-form-element-placeholder-color: #6b7570;
  --pico-form-element-invalid-border-color: var(--fu-error);
  --pico-form-element-invalid-active-border-color: var(--fu-error);
  --pico-form-element-invalid-focus-color: color-mix(in srgb, var(--fu-error) 25%, transparent);
  --pico-card-background-color: var(--fu-surface);
  --pico-card-sectioning-background-color: var(--fu-surface-sunk);
  --pico-card-box-shadow: 0 1px 2px rgb(10 10 10 / 0.06), 0 4px 16px rgb(10 10 10 / 0.06);
  --pico-modal-overlay-background-color: rgb(11 58 47 / 0.55);
  --pico-mark-background-color: var(--fu-pen-tint);
  --pico-mark-color: var(--fu-ink);
  --pico-ins-color: var(--fu-velvet);
  --pico-del-color: var(--fu-error);
}

/* ---------- Base and browser surfaces ---------- */
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body { font-feature-settings: "ss01" 0; text-rendering: optimizeLegibility; overflow-wrap: anywhere; }
::selection { background: var(--fu-pen-tint); color: var(--fu-ink); }
input, textarea, select { caret-color: var(--fu-pen); font-size: var(--fu-text-body); }
:focus-visible { outline: 2px solid var(--fu-pen); outline-offset: 2px; }
/* Programmatic focus targets (headings, alerts) are not controls; no ring. */
[tabindex="-1"]:focus { outline: none; }
a { text-underline-offset: 0.18em; }
* { scrollbar-color: var(--fu-rule-strong) transparent; }
h1, h2, h3 { font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: var(--fu-text-heading); line-height: 1.3; }
small, .fu-meta { font-size: var(--fu-text-meta); line-height: 1.45; color: var(--fu-ink-muted); }
.fu-num { font-variant-numeric: tabular-nums; }
/* !important on size: Pico gives inputs width: 100% with higher specificity, which made hidden file inputs overflow. */
.fu-visually-hidden {
  position: absolute !important; inline-size: 1px !important; block-size: 1px !important;
  min-block-size: 0 !important; margin: -1px !important; padding: 0 !important; border: 0 !important;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.fu-icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

/* Pico form tweaks: user-entered text is "pen" ink; labels are print ink. */
label, legend { color: var(--fu-ink); }
input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select { color: var(--fu-pen); min-block-size: var(--fu-touch); }
input::placeholder, textarea::placeholder { color: var(--pico-form-element-placeholder-color); }
fieldset { margin-block-end: var(--fu-space-5); }
fieldset > legend { font-weight: 650; font-size: var(--fu-text-body); padding-block-end: var(--fu-space-2); }
.fu-field-hint { display: block; margin-block: calc(var(--fu-space-1) * -1) var(--fu-space-4); font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
.fu-field-error { display: flex; gap: var(--fu-space-2); align-items: flex-start; margin-block: calc(var(--fu-space-1) * -1) var(--fu-space-4); font-size: var(--fu-text-meta); color: var(--fu-error); font-weight: 600; }
.fu-req { font-weight: 450; color: var(--fu-ink-muted); font-size: var(--fu-text-meta); }
details.fu-more { border-block: 1px solid var(--fu-rule); padding-block: var(--fu-space-3); margin-block: var(--fu-space-2) var(--fu-space-5); }
details.fu-more > summary { font-weight: 600; color: var(--fu-pen); }

/* Buttons */
button, [role="button"], input[type="submit"] { font-weight: 650; min-block-size: var(--fu-touch); }
.fu-btn-row { display: flex; gap: var(--fu-space-3); flex-wrap: wrap; align-items: center; }
/* Secondary (filled via the token map above, and outline here): ink on surface, rule-strong border, sunk on hover. Pico's outline uses one muted grey for text and border, which reads as disabled. */
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary { --pico-color: var(--fu-ink); --pico-border-color: var(--fu-rule-strong); --pico-background-color: var(--fu-surface); }
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { --pico-color: var(--fu-ink); --pico-border-color: var(--fu-ink-muted); --pico-background-color: var(--fu-surface-sunk); }
.fu-btn-link { background: none; border: 0; padding: 0; min-block-size: auto; color: var(--fu-pen); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }

/* ---------- App header (velvet cover) ---------- */
.fu-cover {
  background: var(--fu-velvet); color: var(--fu-on-velvet);
  padding: var(--fu-space-4) var(--fu-gutter) var(--fu-space-5);
  border-block-end: 3px solid transparent;
  transition: border-color var(--fu-line-draw) var(--fu-ease-out);
}
.fu-cover[data-published="true"] { border-block-end-color: var(--fu-gilt); }
/* Sample cards (homepage demo, dashboard "contoh tampilan editor") wear the primary pink; the real app header stays velvet. */
.fu-sample .fu-cover { background: var(--fu-pen); color: #fff; }
.fu-cover a, .fu-cover .fu-btn-link { color: var(--fu-on-velvet-muted); }
.fu-cover a:hover { color: var(--fu-on-velvet); }
.fu-back { display: inline-flex; align-items: center; gap: var(--fu-space-1); min-block-size: 2.75rem; font-size: var(--fu-text-body); text-decoration: none; }
/* Published invitations: the share page is one tap from the editor, on the chip line. */
.fu-cover__share { margin-inline-start: var(--fu-space-3); vertical-align: middle; text-decoration: underline; text-underline-offset: 0.25em; }
.fu-name {
  font-family: var(--fu-font-name); font-weight: 400; font-size: var(--fu-text-name); line-height: 1.15;
  letter-spacing: 0; color: var(--fu-on-velvet); margin: var(--fu-space-2) 0 0;
  overflow-wrap: anywhere;
}
/* Server sets data-long when couple_short exceeds 24 characters: never truncate a name, step the size down instead. */
.fu-name[data-long] { font-size: var(--fu-text-heading); line-height: 1.3; }
.fu-chip {
  display: inline-flex; align-items: center; gap: var(--fu-space-2); margin-block-start: var(--fu-space-3);
  font-size: var(--fu-text-meta); font-weight: 600; line-height: 1.3;
  padding: 0.3125rem 0.75rem; border-radius: 999px; background: rgb(255 255 255 / 0.12); color: var(--fu-on-velvet);
}
.fu-chip::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; border: 1.5px dashed currentColor; }
.fu-chip[data-state="dirty"]::before { border-style: solid; background: currentColor; }
.fu-chip[data-state="published"] { background: var(--fu-gilt); color: var(--fu-ink); }
.fu-chip[data-state="published"]::before { border-style: solid; background: currentColor; }

/* Skip link: off-screen until a keyboard user tabs to it. */
.fu-skip { position: absolute; inset-inline-start: var(--fu-space-2); inset-block-start: var(--fu-space-2); z-index: 100; display: inline-flex; align-items: center; min-block-size: var(--fu-touch); padding: var(--fu-space-2) var(--fu-space-4); background: var(--fu-surface); color: var(--fu-pen); font-weight: 650; border-radius: var(--fu-radius); transform: translateY(calc(-100% - var(--fu-space-4))); }
.fu-skip:focus { transform: none; }

/* Top bar (dashboard, non-editor pages) */
/* Thin band, 62px: Pico's 16px header padding goes; nav items keep their own spacing around 44px targets. */
.fu-topbar { background: var(--fu-velvet); color: var(--fu-on-velvet); padding-block: 0; }
.fu-topbar nav { padding-inline: var(--fu-gutter); max-inline-size: 72rem; margin-inline: auto; }
/* Signed-in phones have more links than fit one line: wrap whole links, never break words inside them. */
.fu-topbar nav, .fu-topbar nav ul { flex-wrap: wrap; }
.fu-topbar nav :is(a, summary) { white-space: nowrap; }
@media (max-width: 767.98px) {
  /* Rows of bare 44px targets: 62px signed out, and wrapped rows stay compact. */
  .fu-topbar nav { padding-block: var(--fu-space-2); }
  .fu-topbar nav li { padding-block: 0; }
  .fu-topbar nav li > a { margin-block: 0; }
}
.fu-topbar a { color: var(--fu-on-velvet-muted); text-decoration: none; }
.fu-topbar nav li > a { display: inline-flex; align-items: center; min-block-size: 2.75rem; } /* 44px tap height */
.fu-topbar a[aria-current="page"], .fu-topbar a:hover { color: var(--fu-on-velvet); }
.fu-wordmark { font-family: var(--fu-font-name); font-size: var(--fu-text-heading); color: var(--fu-pen) !important; letter-spacing: 0; }
.fu-wordmark { display: inline-flex; align-items: center; gap: 0.5rem; }
.fu-topbar nav li > a.fu-wordmark { margin-block: 0; }   /* Pico's -8px link margin lifted the wordmark ~3px above the bar's middle on desktop */
.fu-wordmark__logo { inline-size: auto; block-size: 1.75rem; flex: none; }   /* the logo's viewBox is cropped to its ink, so flex centering lines it up with the text */
/* Signed-in phones: wordmark plus one "Menu" disclosure; the open panel overlays the page under the bar. */
.fu-topbar { position: relative; }
/* Pen-blue rings vanish on velvet. */
.fu-topbar :focus-visible { outline-color: var(--fu-on-velvet); }
.fu-menu { display: none; margin: 0; align-self: center; /* nav stretched it, so the 44px circle sat at its top */ --pico-accordion-close-summary-color: var(--fu-on-velvet); --pico-accordion-open-summary-color: var(--fu-on-velvet); --pico-accordion-active-summary-color: var(--fu-on-velvet); }
@media (max-width: 767.98px) {
  .fu-topbar .fu-nav-wide { display: none; }
  .fu-menu { display: block; }
  .fu-menu > summary {
    display: inline-flex; align-items: center; gap: var(--fu-space-2); min-block-size: 2.75rem; padding-inline: var(--fu-space-3);
    list-style: none; color: var(--fu-on-velvet); font-weight: 600; border: 1.5px solid rgb(255 255 255 / 0.7); border-radius: var(--fu-radius);
  }
  .fu-menu > summary::-webkit-details-marker { display: none; }
  .fu-menu > summary::after { content: none; }
  /* Pico adds margin under an open summary, which grew the bar. */
  .fu-menu[open] > summary { margin-block-end: 0; background: rgb(255 255 255 / 0.12); }
  .fu-topbar .fu-menu__panel { position: absolute; z-index: 50; display: block; }
}

/* ---------- Section list: the signature line ---------- */
/* Pico styles every <nav> as a horizontal flex bar; the section nav is a vertical list. */
.fu-editor__nav { display: block; overflow-x: clip; }
.fu-editor__nav .fu-section { inline-size: 100%; }
.fu-editor__nav ol, .fu-editor__nav ul { display: block; margin: 0; padding: 0; }
.fu-editor__nav li { display: block; padding: 0; margin: 0; }
.fu-editor__nav a.fu-section { margin: 0; border-radius: 0; }
.fu-sections { list-style: none; margin: 0; padding: 0; }
.fu-sections li { list-style: none; margin: 0; }
.fu-section {
  position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: var(--fu-space-3); row-gap: 0.125rem;
  align-items: baseline; padding: var(--fu-space-4) var(--fu-gutter) calc(var(--fu-space-4) - 0.125rem);
  color: var(--fu-ink); text-decoration: none; min-block-size: 4rem;
}
.fu-section:hover { background: var(--fu-surface); }
.fu-section__title { font-weight: 700; font-size: var(--fu-text-body); }
.fu-section__status { font-size: var(--fu-text-meta); color: var(--fu-ink-muted); font-weight: 600; white-space: nowrap; }
.fu-section__value {
  grid-column: 1 / -1; color: var(--fu-pen); font-size: var(--fu-text-body); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fu-section__value:empty { display: none; }
.fu-section__req { grid-column: 1 / -1; font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
/* Status bar under each row (2026-10-21, replaces the dotted/dashed/solid line): a light track,
   a pink fill as long as the share done. Partial fills carry slowly flowing stripes, so the state
   reads by shape as well as length; the status is also written out beside the title. */
.fu-section::before, .fu-section::after {
  content: ""; position: absolute; inset-inline-start: var(--fu-gutter); inset-block-end: 0;
  block-size: 4px; border-radius: 999px;
}
.fu-section::before { inline-size: calc(100% - 2 * var(--fu-gutter)); background: var(--fu-rule); }
.fu-section::after {
  inline-size: calc((100% - 2 * var(--fu-gutter)) * var(--p, 0)); background: var(--fu-pen); transform-origin: left center;
  transition: inline-size 600ms var(--fu-ease-out);   /* htmx settles style/data-status, so a changed fill grows into place */
}
.fu-section[data-status="partial"] { --p: var(--fill, 0.5); }
.fu-section[data-status="complete"] { --p: 1; }
.fu-section[data-status="partial"]::after {
  background: repeating-linear-gradient(90deg, var(--fu-pen) 0 10px, color-mix(in srgb, var(--fu-pen) 45%, white) 10px 14px);
  animation: fu-march 1.2s linear infinite;
}
@keyframes fu-march { to { background-position-x: 14px; } }
/* First paint: every bar grows in once; editor.js sets .fu-bars-ready so autosave swaps don't replay it. */
html:not(.fu-bars-ready) .fu-section::after { animation: fu-sign 800ms var(--fu-ease-out) both; }
html:not(.fu-bars-ready) .fu-section[data-status="partial"]::after { animation: fu-sign 800ms var(--fu-ease-out) both, fu-march 1.2s linear 800ms infinite; }
.fu-section[data-status="complete"].is-just-completed::after { animation: fu-sign 600ms var(--fu-ease-out) both; }
@keyframes fu-sign { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .fu-section::after { animation: none !important; transition: none; } }
[dir="rtl"] .fu-section::after { transform-origin: right center; }
.fu-section[aria-current="step"] { background: var(--fu-surface); box-shadow: inset 0 1px 0 var(--fu-rule); } /* the ::after status line is the only line under a row */
.fu-section[aria-current="step"] .fu-section__title { color: var(--fu-velvet); }
.fu-sections[data-focus="true"] .fu-section:not([aria-current="step"]) .fu-section__title { color: #39433f; font-weight: 600; }
.fu-section__chev { display: none; }
@media (max-width: 1023.98px) {
  .fu-section { grid-template-columns: 1fr auto auto; }
  .fu-section__chev { display: block; color: var(--fu-ink-muted); align-self: center; grid-row: 1; grid-column: 3; }
}

/* ---------- Editor layout ---------- */
.fu-editor { min-block-size: 100dvh; display: flex; flex-direction: column; background: var(--fu-page); }
.fu-editor__main { flex: 1; padding-block-end: 9rem; }
.fu-editor__intro { padding: var(--fu-space-4) var(--fu-gutter) var(--fu-space-2); margin: 0; color: var(--fu-ink-muted); font-size: var(--fu-text-body); }
.fu-block { padding: var(--fu-space-5) var(--fu-gutter); max-inline-size: 40rem; }
.fu-block > h2 { margin-block: 0 var(--fu-space-2); outline: none; }
.fu-block__lede { color: var(--fu-ink-muted); margin-block: 0 var(--fu-space-5); }
.fu-block__next { display: flex; justify-content: flex-end; margin-block-start: var(--fu-space-5); padding-block-start: var(--fu-space-4); border-block-start: 1px solid var(--fu-rule); }
.fu-block__next a { display: inline-flex; gap: var(--fu-space-2); align-items: center; font-weight: 650; text-decoration: none; min-block-size: var(--fu-touch); }
.fu-default { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fu-space-3); margin-block: calc(var(--fu-space-3) * -1) var(--fu-space-3); font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
.fu-default .fu-btn-link { inline-size: auto; margin: 0; min-block-size: var(--fu-touch); font-size: var(--fu-text-body); }
.fu-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fu-space-1) var(--fu-space-3); margin-block: calc(var(--fu-space-2) * -1) var(--fu-space-4); }
.fu-upload__btn { display: inline-flex; align-items: center; min-block-size: var(--fu-touch); padding-inline: var(--fu-space-4); margin: 0; border: 1px solid var(--fu-rule-strong); border-radius: var(--fu-radius); background: var(--fu-surface); color: var(--fu-pen); font-weight: 650; cursor: pointer; }
.fu-upload__btn:hover { background: var(--fu-surface-sunk); }
.fu-upload:has(input:focus-visible) .fu-upload__btn { outline: 2px solid var(--fu-pen); outline-offset: 2px; }
.fu-upload__meta, .fu-upload__status { font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
.fu-upload__status { flex-basis: 100%; }
.fu-upload__status:empty { display: none; }
.fu-note { background: var(--fu-surface-sunk); border-radius: var(--fu-radius); padding: var(--fu-space-4); margin-block-end: var(--fu-space-5); }
.fu-note p { margin: 0; }
.fu-note p + p { margin-block-start: var(--fu-space-1); color: var(--fu-ink-muted); }
.fu-track { margin: 0 0 var(--fu-space-4); padding: var(--fu-space-4); background: var(--fu-surface); border: 1px solid var(--fu-rule); border-radius: var(--fu-radius); }
.fu-track figcaption { margin-block-end: var(--fu-space-3); }
.fu-track__title { font-weight: 650; color: var(--fu-pen); }
.fu-track__meta { display: block; font-size: var(--fu-text-meta); color: var(--fu-ink-muted); font-variant-numeric: tabular-nums; }
.fu-track audio { display: block; inline-size: 100%; }
.fu-person { background: var(--fu-surface); border: 1px solid var(--fu-rule); border-radius: var(--fu-radius); padding: var(--fu-space-4); margin-block-end: var(--fu-space-4); }
.fu-person > legend { float: left; inline-size: 100%; padding: 0 0 var(--fu-space-3); }
.fu-person > legend + * { clear: both; }
.fu-located { display: flex; gap: var(--fu-space-2); align-items: center; margin-block: calc(var(--fu-space-2) * -1) var(--fu-space-4); font-size: var(--fu-text-meta); color: var(--fu-pen); font-weight: 600; }
.fu-add { display: inline-flex; justify-content: center; align-items: center; gap: var(--fu-space-2); inline-size: 100%; }
.fu-grid-2 { display: grid; gap: 0 var(--fu-space-3); grid-template-columns: 1fr; }
@media (min-width: 480px) { .fu-grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- Editor fields as filled bars (2026-10-21, replaces the guest-book lines) ----------
   A white bar with a 3:1 border; a soft pink fill marks what is still empty; focus draws a pink
   border with a soft ring; red when it needs fixing. */
/* :where keeps these at (0,2,0): enough to beat Pico, low enough for the state rules below. */
.fu-editor .fu-block :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select, textarea) {
  min-block-size: 3rem; padding: 0.75rem 1rem; border: 1.5px solid var(--fu-rule-strong); border-radius: 0.75rem;
  background-color: var(--fu-surface); box-shadow: none; color: var(--fu-ink);
  transition: border-color 160ms var(--fu-ease-out), box-shadow 160ms var(--fu-ease-out), background-color 160ms var(--fu-ease-out);
}
.fu-editor .fu-block :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), textarea) { background-image: none; }
.fu-editor .fu-block :where(select) { padding-inline-end: 2.5rem; }  /* room for Pico's chevron */
.fu-editor .fu-block :where(input, select, textarea):hover { border-color: var(--fu-ink-muted); }
.fu-editor .fu-block :where(input, textarea)[data-empty] { background-color: var(--fu-surface-sunk); }
.fu-editor .fu-block :where(input, select, textarea):focus { border-color: var(--fu-pen); background-color: var(--fu-surface); box-shadow: 0 0 0 1px var(--fu-pen), 0 0 0 5px var(--fu-pen-tint); outline: none; }
.fu-editor .fu-block :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--fu-error); background-color: var(--fu-error-tint); }
.fu-editor .fu-block :is(input, select, textarea)[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--fu-error), 0 0 0 5px var(--fu-error-tint); }
/* The question takes pen ink while it is being answered. */
.fu-editor .fu-block label:has(+ :is(input, textarea, select):focus) { color: var(--fu-pen); }
.fu-editor .fu-block label { transition: color 160ms var(--fu-ease-out); }
@media (forced-colors: active) { .fu-editor .fu-block :is(input, select, textarea) { border: 2px solid CanvasText; } }

/* "Tersimpan" beside the label of a field the last autosave stored: a small tinted pill with a tick.
   Out of flow: the note must never push the label onto a second line and shift the page. */
.fu-saved-flash { position: relative; }
.fu-saved-flash::after {
  content: "Tersimpan"; position: absolute; z-index: 2; inset-inline-end: 0; inset-block-start: 50%; translate: 0 -50%;
  padding: 0.125rem 0.5rem 0.125rem 1.375rem; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font-size: 0.75rem; font-weight: 600; line-height: 1.4; color: var(--fu-pen-hover);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e2157' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") 0.45rem center / 0.75rem no-repeat, var(--fu-pen-tint);
  box-shadow: 0 1px 2px rgb(10 10 10 / 0.06), 0 0 0 1px rgb(190 44 107 / 0.12);
  animation: fu-saved 2.4s var(--fu-ease-out) forwards;
}
@keyframes fu-saved { 0% { opacity: 0; scale: 0.85; } 10% { opacity: 1; scale: 1.04; } 16%, 78% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 0.96; } }
@media (prefers-reduced-motion: reduce) { .fu-saved-flash::after { animation: fu-saved-still 2.4s steps(1) forwards; } @keyframes fu-saved-still { 0% { opacity: 1; } 100% { opacity: 0; } } }

/* Whole-invitation progress above the section list; refreshed by every save. */
.fu-progress { padding: var(--fu-space-4) var(--fu-gutter) var(--fu-space-3); border-block-end: 1px solid var(--fu-rule); }
.fu-progress__count { margin: 0; font-size: var(--fu-text-body); }
.fu-progress__count b { font-size: var(--fu-text-heading); font-weight: 650; }
/* The section lines in one: a pen stroke for what is done over dots for what is left. */
.fu-progress__line { position: relative; display: block; block-size: 6px; margin-block: var(--fu-space-2); border-radius: 999px; background: var(--fu-rule); overflow: hidden; }
.fu-progress__line::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--done) * 100%); background: linear-gradient(90deg, color-mix(in srgb, var(--fu-pen) 70%, white), var(--fu-pen)); border-radius: inherit; transform-origin: left center; transition: inline-size 600ms var(--fu-ease-out); }
html:not(.fu-bars-ready) .fu-progress__line::before { animation: fu-sign 900ms var(--fu-ease-out) both; }
@media (prefers-reduced-motion: reduce) { .fu-progress__line::before { animation: none !important; transition: none; } }
.fu-progress__note { margin: 0; font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
.fu-editor__intro { font-size: var(--fu-text-meta); }

/* Move between sections: back as a quiet link, forward as the obvious next step. */
.fu-block__next { justify-content: space-between; gap: var(--fu-space-3); flex-wrap: wrap; }
.fu-block__next a { display: inline-flex; align-items: center; gap: var(--fu-space-2); min-block-size: var(--fu-touch); font-weight: 650; text-decoration: none; }
.fu-block__prev { color: var(--fu-ink-muted); }
.fu-block__prev:hover { color: var(--fu-ink); }
.fu-block__go { margin-inline-start: auto; padding-inline: var(--fu-space-4); border: 1.5px solid var(--fu-pen); border-radius: var(--fu-radius); color: var(--fu-pen); }
.fu-block__go:hover { background: var(--fu-pen-tint); }
.fu-block__go .fu-icon { transition: translate 200ms var(--fu-ease-out); }
.fu-block__go:hover .fu-icon { translate: 3px 0; }

/* Action bar: sticky, thumb zone */
.fu-actionbar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 10;
  background: var(--fu-velvet); color: var(--fu-on-velvet);
  padding: var(--fu-space-3) var(--fu-space-4) calc(var(--fu-space-4) + env(safe-area-inset-bottom));
}
.fu-save { display: flex; align-items: center; gap: var(--fu-space-2); min-block-size: 1.5rem; margin: 0 0 var(--fu-space-2); font-size: var(--fu-text-meta); color: var(--fu-on-velvet-muted); }
.fu-save[data-state="error"] { color: #ffd7d2; font-weight: 600; }
.fu-actionbar__buttons { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--fu-space-3); }
.fu-actionbar button, .fu-actionbar [role="button"] { margin: 0; inline-size: 100%; display: inline-flex; justify-content: center; align-items: center; gap: var(--fu-space-2); }
.fu-actionbar .fu-ghost { background: transparent; border: 1.5px solid rgb(255 255 255 / 0.7); color: var(--fu-on-velvet); }
.fu-actionbar .fu-ghost:hover { background: rgb(255 255 255 / 0.1); }
.fu-actionbar .fu-primary { background: var(--fu-on-velvet); border-color: var(--fu-on-velvet); color: var(--fu-velvet); }
.fu-actionbar .fu-primary:hover { background: var(--fu-on-velvet-hover); }
.fu-actionbar button[aria-busy="true"] { pointer-events: none; }

/* Desktop: one sticky header row (back, names, chip, share | save status, publish), then list | form | preview. */
.fu-preview-pane { display: none; }
@media (min-width: 1024px) {
  .fu-editor { --fu-editor-head: 4.5rem; }
  .fu-editor > .fu-cover { position: sticky; inset-block-start: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--fu-space-1) var(--fu-space-4); min-block-size: var(--fu-editor-head); padding: var(--fu-space-2) var(--fu-space-5); }
  .fu-editor > .fu-cover .fu-name { margin: 0; font-size: 1.625rem; }
  .fu-editor > .fu-cover .fu-name[data-long] { font-size: var(--fu-text-heading); }
  .fu-editor > .fu-cover .fu-chip { margin: 0; }
  .fu-editor > .fu-cover .fu-cover__share { margin: 0; }
  .fu-actionbar { position: static; margin-inline-start: auto; padding: 0; background: none; }
  .fu-actionbar__inner { display: flex; align-items: center; gap: var(--fu-space-4); }
  .fu-actionbar__buttons { display: flex; }
  .fu-actionbar button { inline-size: auto; padding-inline: var(--fu-space-5); }
  .fu-save { margin: 0; }
  .fu-editor__body { display: grid; grid-template-columns: 19rem minmax(0, 1fr) 26rem; align-items: start; }
  /* Side panes stay put under the header while the form scrolls the page. */
  .fu-editor__nav, .fu-preview-pane { position: sticky; inset-block-start: var(--fu-editor-head); block-size: calc(100dvh - var(--fu-editor-head)); }
  .fu-editor__nav { overflow-y: auto; background: var(--fu-surface-sunk); border-inline-end: 1px solid var(--fu-rule); }
  .fu-editor__intro { font-size: var(--fu-text-meta); padding-block-start: var(--fu-space-3); }
  .fu-editor__nav .fu-section { padding-inline: var(--fu-space-5); }
  .fu-editor__nav .fu-section::before { inset-inline-start: var(--fu-space-5); inline-size: calc(100% - 2 * var(--fu-space-5)); }
  .fu-editor__nav .fu-section::after { inset-inline-start: var(--fu-space-5); inline-size: calc((100% - 2 * var(--fu-space-5)) * var(--p, 0)); }
  .fu-editor__nav .fu-section[data-status="partial"]::after { inline-size: calc((100% - 2 * var(--fu-space-5)) * var(--fill, 0.5)); }
  .fu-editor__main { padding-block-end: var(--fu-space-7); }
  .fu-block { padding-inline: var(--fu-space-6); }
  .fu-preview-pane { display: flex; align-items: center; justify-content: center; padding: var(--fu-space-5); border-inline-start: 1px solid var(--fu-rule); background: var(--fu-surface-sunk); }
  /* The whole phone fits the pane: height drives the frame, capped so the width stays inside 26rem. */
  .fu-preview-pane .fu-phone-frame { block-size: min(100%, calc((26rem - 3rem) * 760 / 390)); inline-size: auto; max-inline-size: 100%; }
  .fu-mobile-only { display: none !important; }
}
@media (max-width: 1023.98px) {
  .fu-desktop-only { display: none !important; }
  /* Phones show one job per screen: the section list, or one section's form. */
  .fu-editor[data-view="list"] .fu-editor__main { display: none; }
  .fu-editor[data-view="block"] .fu-editor__nav { display: none; }
  .fu-editor[data-view="list"] .fu-back--sections { display: none; }
  .fu-editor[data-view="block"] .fu-back--home { display: none; }
}
@media (min-width: 1024px) { .fu-back--sections { display: none; } }
.fu-phone-frame { inline-size: 100%; max-inline-size: 22rem; aspect-ratio: 390 / 760; margin-inline: auto; border: 1px solid var(--fu-rule-strong); border-radius: 1.5rem; overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgb(10 10 10 / 0.08), 0 16px 40px rgb(10 10 10 / 0.10); }
.fu-phone-frame iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }

/* Full-screen preview dialog on phones */
dialog.fu-preview-dialog { padding: 0; margin: 0; inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: none; flex-direction: column; align-items: stretch; border: 0; background: var(--fu-surface-sunk); }
dialog.fu-preview-dialog::backdrop { background: var(--pico-modal-overlay-background-color); }
.fu-preview-dialog header { display: flex; align-items: center; justify-content: space-between; padding: var(--fu-space-2) var(--fu-space-4); background: var(--fu-velvet); color: var(--fu-on-velvet); }
.fu-preview-dialog header button { margin: 0; background: transparent; border: 1.5px solid rgb(255 255 255 / 0.7); color: var(--fu-on-velvet); display: inline-flex; gap: var(--fu-space-2); align-items: center; }
.fu-preview-dialog iframe { inline-size: 100%; flex: 1; border: 0; background: #fff; }

/* ---------- Notices ---------- */
.fu-notice { display: flex; gap: var(--fu-space-3); align-items: flex-start; padding: var(--fu-space-4) var(--fu-gutter); background: var(--fu-notice-tint); color: var(--fu-notice); font-size: var(--fu-text-body); font-weight: 600; }
.fu-notice--error { background: var(--fu-error-tint); color: var(--fu-error); }
.fu-notice p { margin: 0; }
.fu-notice ul { margin: var(--fu-space-2) 0 0; padding-inline-start: var(--fu-space-4); font-weight: 500; }
.fu-notice a { color: inherit; font-weight: 700; }
.fu-tip { display: flex; gap: var(--fu-space-3); align-items: flex-start; margin: var(--fu-space-3) var(--fu-gutter) 0; padding: var(--fu-space-3) var(--fu-space-4); background: var(--fu-pen-tint); border-radius: var(--fu-radius); color: var(--fu-ink); font-size: var(--fu-text-body); }
.fu-tip p { margin: 0; flex: 1; }
.fu-tip button { margin: 0; min-block-size: 2.75rem; min-inline-size: 2.75rem; padding: 0; background: transparent; border: 0; color: var(--fu-ink-muted); display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Dashboard empty state (first use) ---------- */
.fu-page { max-inline-size: 72rem; margin-inline: auto; padding: var(--fu-space-6) var(--fu-gutter) var(--fu-space-7); }
.fu-empty { display: grid; gap: var(--fu-space-6); align-items: center; }
@media (min-width: 900px) { .fu-empty { grid-template-columns: 1fr 1fr; gap: var(--fu-space-7); } }
/* ---------- Dashboard: each invitation is a small copy of its editor header ---------- */
.fu-dash-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--fu-space-3) var(--fu-space-5); margin-block-end: var(--fu-space-5); }
.fu-dash-head h1 { margin: 0; }
.fu-dash-head .fu-meta { margin: var(--fu-space-1) 0 0; }
.fu-dash-head [role="button"] { display: inline-flex; align-items: center; gap: var(--fu-space-2); margin: 0; }
.fu-invs { display: grid; gap: var(--fu-space-4); margin: 0; padding: 0; }
@media (min-width: 640px) { .fu-invs { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); } }
.fu-inv { list-style: none; display: flex; flex-direction: column; margin: 0; background: var(--fu-surface); border: 1px solid var(--fu-rule); border-radius: var(--fu-radius); overflow: hidden; transition: box-shadow 200ms var(--fu-ease-out), border-color 200ms var(--fu-ease-out); }
.fu-inv:hover { border-color: var(--fu-rule-strong); box-shadow: 0 4px 8px rgb(10 10 10 / 0.08), 0 14px 28px rgb(10 10 10 / 0.10); }
.fu-inv__cover { display: grid; justify-items: start; gap: var(--fu-space-3); padding: var(--fu-space-5) var(--fu-space-4) var(--fu-space-4); background: var(--fu-pen); color: #fff; text-decoration: none; border-block-end: 3px solid transparent; }
.fu-inv__cover[data-published="true"] { border-block-end-color: var(--fu-gilt); }
.fu-inv__cover:hover { background: color-mix(in srgb, var(--fu-pen) 88%, black); }
.fu-inv__cover:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.fu-inv__names { font-family: var(--fu-font-name); font-size: var(--fu-text-name); line-height: 1.15; overflow-wrap: anywhere; }
.fu-inv__names[data-long] { font-size: var(--fu-text-heading); line-height: 1.3; }
.fu-inv__cover .fu-chip { margin: 0; }
/* On the pink card the gilt chip clashes; "Terbit" goes white with pink ink instead. */
.fu-inv__cover .fu-chip[data-state="published"] { background: #fff; color: var(--fu-pen); }
.fu-inv__body { display: flex; flex-direction: column; gap: var(--fu-space-2); flex: 1; padding: var(--fu-space-4); }
.fu-inv__meta, .fu-inv__address { margin: 0; font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
.fu-inv__address a { font-weight: 600; overflow-wrap: anywhere; }
.fu-inv__stats { display: flex; gap: var(--fu-space-6); margin: var(--fu-space-1) 0 0; }
.fu-inv__stats div { display: flex; flex-direction: column-reverse; }
.fu-inv__stats dt { font-size: var(--fu-text-meta); font-weight: 450; color: var(--fu-ink-muted); }
.fu-inv__stats dd { margin: 0; font-size: var(--fu-text-heading); font-weight: 650; line-height: 1.3; }
.fu-inv__actions { display: flex; flex-wrap: wrap; gap: 0 var(--fu-space-4); margin-block-start: auto; padding-block-start: var(--fu-space-2); border-block-start: 1px solid var(--fu-rule); }
.fu-inv__actions a { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-weight: 600; }

/* Page titles: one treatment on every non-editor page. Young Serif stays reserved for couple names and the publish moment. */
.fu-page h1 { font-family: var(--fu-font); font-weight: 650; font-size: var(--fu-text-name); line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 var(--fu-space-3); }
.fu-empty p { max-inline-size: 34rem; }
.fu-steps { list-style: none; padding: 0; margin: var(--fu-space-5) 0; counter-reset: none; }
/* Plain solid rules: the dotted line is the signature "empty" status and does not belong on a list of steps. */
.fu-steps li { list-style: none; display: grid; grid-template-columns: 1fr; padding: var(--fu-space-3) 0; border-block-end: 1px solid var(--fu-rule); }
.fu-steps b { font-weight: 700; }
.fu-steps span { color: var(--fu-ink-muted); }
.fu-sample__label { margin: 0; padding: var(--fu-space-2) var(--fu-space-4); font-size: var(--fu-text-meta); font-weight: 600; color: var(--fu-ink-muted); background: var(--fu-surface-sunk); border-block-end: 1px solid var(--fu-rule); }
.fu-sample { background: var(--fu-surface); border: 1px solid var(--fu-rule); border-radius: var(--fu-radius); overflow: hidden; box-shadow: var(--pico-card-box-shadow); max-inline-size: 26rem; justify-self: center; inline-size: 100%; }
.fu-sample .fu-cover { padding-block: var(--fu-space-4); }
.fu-sample figcaption { padding: var(--fu-space-3) var(--fu-space-4); font-size: var(--fu-text-meta); color: var(--fu-ink-muted); border-block-start: 1px solid var(--fu-rule); }

/* ---------- Template picker ---------- */
.fu-picker > * { max-inline-size: 60rem; } /* page stays on the 72rem shell so it lines up with the top bar */
.fu-templates { display: grid; gap: var(--fu-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); list-style: none; padding: 0; margin: 0; }
@media (min-width: 768px) { .fu-templates { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fu-templates li { list-style: none; margin: 0; padding: 0; display: flex; }
.fu-templates li, .fu-templates li > .fu-template { min-inline-size: 0; } /* long names ellipsize instead of widening the track */
.fu-templates li > .fu-template { flex: 1; }
.fu-picker button[type="submit"] { inline-size: auto; min-inline-size: 16rem; }
/* Pinned so the choice is one tap away wherever the list is scrolled: a floating dock in the top bar's pill language. */
.fu-picker__bar { position: sticky; inset-block-end: var(--fu-space-3); z-index: 10; display: flex; align-items: center; gap: var(--fu-space-3);
  margin-block: var(--fu-space-5) var(--fu-space-3); padding: var(--fu-space-2);
  background: rgb(255 255 255 / 0.85); border: 1px solid rgb(229 229 229 / 0.7); border-radius: 1.5rem; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgb(10 10 10 / 0.06), 0 10px 28px rgb(10 10 10 / 0.10); }
.fu-picker__choice { display: flex; align-items: center; gap: var(--fu-space-3); flex: 1; min-inline-size: 0; margin: 0; padding-inline-start: var(--fu-space-1); }
.fu-picker__thumb { flex: none; inline-size: 2.25rem; block-size: 3rem; object-fit: cover; object-position: top; border-radius: 0.625rem; box-shadow: 0 0 0 1px var(--fu-rule); }
.fu-picker__text { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.3; }
.fu-picker__text .fu-meta { line-height: 1.3; }
.fu-picker__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-picker__text b:empty { display: none; }
.fu-picker__bar button[type="submit"] { flex: none; margin: 0; min-inline-size: 0; min-block-size: var(--fu-touch); padding-inline: var(--fu-space-5); border-radius: 999px; }
@media (max-width: 479px) { .fu-picker__bar button[type="submit"] { padding-inline: var(--fu-space-4); } }
.fu-picker button[disabled] { opacity: 1; background: var(--fu-surface-sunk); border-color: var(--fu-rule-strong); color: var(--fu-ink-muted); }
.fu-template { display: flex; flex-direction: column; block-size: 100%; margin: 0; font-weight: 450; position: relative; border: 1.5px solid var(--fu-rule); border-radius: var(--fu-radius); background: var(--fu-surface); overflow: hidden; color: var(--fu-ink); text-decoration: none; }
.fu-template:has(input:checked) { border-color: var(--fu-pen); box-shadow: 0 0 0 2px var(--fu-pen); }
.fu-template:has(input:focus-visible) { outline: 2px solid var(--fu-pen); outline-offset: 2px; }
.fu-template input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fu-template img { display: block; inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--fu-surface-sunk); }
.fu-templates .fu-template__body { padding: var(--fu-space-3) var(--fu-space-3) var(--fu-space-4); display: block; }
.fu-template__check { position: absolute; inset-block-start: var(--fu-space-2); inset-inline-end: var(--fu-space-2); inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--fu-pen); color: #fff; display: none; align-items: center; justify-content: center; }
.fu-template:has(input:checked) .fu-template__check { display: flex; }
.fu-template:has(input:checked) .fu-template__name { color: var(--fu-pen); }
.fu-template__name { font-weight: 700; display: block; }
.fu-template__by { font-size: var(--fu-text-meta); color: var(--fu-ink-muted); display: block; font-weight: 450; }
.fu-templates + * , .fu-templates { margin-block-end: var(--fu-space-5); }
.fu-badges li { font-weight: 500; list-style: none; }
.fu-badges { display: flex; flex-wrap: wrap; gap: var(--fu-space-1); margin-block-start: var(--fu-space-2); padding: 0; list-style: none; }
.fu-badges li { font-size: var(--fu-text-meta); line-height: 1.2; padding: 0.1875rem 0.5rem; border: 1px solid var(--fu-rule-strong); border-radius: 999px; color: var(--fu-ink-muted); }

/* ---------- Published panel ---------- */
.fu-cover--page { padding-inline: max(var(--fu-gutter), calc((100% - 72rem) / 2 + var(--fu-gutter))); }
.fu-published { padding: var(--fu-space-5) var(--fu-gutter) var(--fu-space-7); max-inline-size: 72rem; margin-inline: auto; display: grid; gap: 0 var(--fu-space-7); }
.fu-published > * { min-inline-size: 0; }
@media (min-width: 1024px) { .fu-published { grid-template-columns: minmax(0, 1fr) 22rem; grid-template-areas: "main wa" "next wa"; align-items: start; } .fu-published__main { grid-area: main; } .fu-wa { grid-area: wa; margin-block-start: var(--fu-space-6); } .fu-next { grid-area: next; } }
.fu-published__title { font-family: var(--fu-font-name); font-weight: 400; font-size: var(--fu-text-name); line-height: 1.15; letter-spacing: 0; margin: 0 0 var(--fu-space-3); }
.fu-url { display: flex; gap: var(--fu-space-2); align-items: stretch; margin-block: var(--fu-space-4); }
.fu-url output { flex: 1; min-inline-size: 0; display: flex; align-items: center; padding-inline: var(--fu-space-3); background: var(--fu-surface); border: 1px solid var(--fu-rule-strong); border-radius: var(--fu-radius); color: var(--fu-pen); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-url button { margin: 0; flex: none; display: inline-flex; align-items: center; gap: var(--fu-space-2); }
.fu-wa { margin-block: var(--fu-space-5); }
.fu-wa__label { font-size: var(--fu-text-meta); color: var(--fu-ink-muted); margin-block-end: var(--fu-space-2); }
.fu-wa__bubble { background: var(--fu-wa-bubble); border-radius: 0.75rem 0.75rem 0.75rem 0.25rem; padding: var(--fu-space-2); max-inline-size: 20rem; box-shadow: 0 1px 1px rgb(0 0 0 / 0.08); }
.fu-wa__card { background: #fff; border-radius: 0.5rem; overflow: hidden; }
.fu-wa__card img { display: block; inline-size: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; }
.fu-wa__meta { padding: var(--fu-space-2) var(--fu-space-3); }
.fu-wa__meta b { display: block; font-size: var(--fu-text-body); line-height: 1.3; }
.fu-wa__meta span { display: block; font-size: var(--fu-text-meta); color: var(--fu-wa-meta); }
.fu-wa__link { display: block; padding: var(--fu-space-2) var(--fu-space-1) 0; font-size: var(--fu-text-meta); color: var(--fu-wa-link); overflow-wrap: anywhere; }
.fu-next { margin-block-start: var(--fu-space-6); padding-block-start: var(--fu-space-5); border-block-start: 1px solid var(--fu-rule); }
.fu-next h2 { margin-block-end: var(--fu-space-2); }
.fu-next p { color: var(--fu-ink-muted); }
.fu-next .fu-btn-row a[role="button"] { display: inline-flex; gap: var(--fu-space-2); align-items: center; }

/* Address and template-upgrade pages: same column as the published panel, readable measure. */
.fu-subpage > * { max-inline-size: 40rem; }
.fu-subpage h2 { margin-block: var(--fu-space-5) var(--fu-space-2); }
.fu-slug { display: flex; align-items: stretch; border: 1px solid var(--fu-rule-strong); border-radius: var(--fu-radius); background: var(--fu-surface); margin-block-end: var(--pico-spacing); }
.fu-slug:focus-within { border-color: var(--fu-pen); box-shadow: 0 0 0 2px var(--fu-pen); }
.fu-slug__prefix { display: flex; align-items: center; padding-inline: var(--fu-space-3) 0; color: var(--fu-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 55%; }
/* The id outranks Pico's input and :focus rules; the wrapper draws border and focus ring. */
.fu-slug input#slug, .fu-slug input#slug:focus { flex: 1; min-inline-size: 0; margin: 0; border: 0; background: transparent; padding-inline-start: 0; box-shadow: none; outline: none; }
.fu-slug:has(input[aria-invalid="true"]) { border-color: var(--fu-error); }
/* Pico pads invalid inputs with !important; the value must stay flush with the prefix. */
.fu-slug input#slug[aria-invalid] { padding-inline-start: 0 !important; }
.fu-editor__address { margin: var(--fu-space-4) 0 var(--fu-space-5); padding-inline: var(--fu-gutter); overflow-wrap: anywhere; }
@media (min-width: 1024px) { .fu-editor__address { padding-inline: var(--fu-space-4); } }

/* ---------- Landing (recedes: white page; the sample invitation and template covers lead) ---------- */
.fu-hero { display: grid; gap: var(--fu-space-5); padding-block-end: var(--fu-space-6); }
.fu-hero > * { min-inline-size: 0; }
.fu-hero h1 { max-inline-size: 26ch; }
.fu-hero__text p { margin: 0; max-inline-size: 36rem; color: var(--fu-ink-muted); }
.fu-hero__cta .fu-btn-row [role="button"] { margin: 0; }
.fu-hero__cta p { margin: var(--fu-space-2) 0 0; }
/* Phones: the frame stays narrower than the screen so a thumb beside it still scrolls the page. */
.fu-hero__sample { margin: 0; justify-self: center; inline-size: min(100%, 21.5rem); scroll-margin-block-start: var(--fu-space-4); }
.fu-hero__sample .fu-phone-frame { max-inline-size: none; }
.fu-hero__sample figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fu-space-1) var(--fu-space-2); margin-block-end: var(--fu-space-2); font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
.fu-hero__sample figcaption a { font-weight: 600; }
.fu-tag { font-weight: 650; line-height: 1.3; color: var(--fu-ink); padding: 0.125rem 0.5rem; border: 1px solid var(--fu-rule-strong); border-radius: 999px; }
@media (min-width: 900px) {
  /* Left stack centred against the phone frame on the 72rem shell. */
  /* Left stack sits high (headline above the fold); the demo column runs beside it. */
  .fu-hero { grid-template-columns: minmax(0, 1fr) 24rem; grid-template-rows: auto auto auto 1fr; grid-template-areas: "text frame" "cta frame" "try frame" ". frame"; gap: var(--fu-space-5) var(--fu-space-7); padding-block: var(--fu-space-5) var(--fu-space-7); }
  .fu-hero__text { grid-area: text; padding-block-start: var(--fu-space-6); }
  .fu-hero__cta { grid-area: cta; }
  .fu-hero .fu-try { grid-area: try; }
  .fu-hero__sample { grid-area: frame; inline-size: 100%; }
}
.fu-landing-block { padding-block: var(--fu-space-6); border-block-start: 1px solid var(--fu-rule); }
.fu-landing-block h2 { margin-block-end: var(--fu-space-4); }
.fu-landing-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--fu-space-4); margin-block-end: var(--fu-space-3); }
.fu-landing-head h2 { margin: 0; }
.fu-landing-more { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-weight: 600; } /* 44px tap height */
/* Link cards (landing strip, gallery): no frame; the cover carries the card and lifts on hover/focus. */
a.fu-template { border: 0; background: none; overflow: visible; }
a.fu-template img, a.fu-template .fu-template__blank {
  border-radius: var(--fu-radius);
  box-shadow: 0 1px 2px rgb(10 10 10 / 0.08), 0 2px 8px rgb(10 10 10 / 0.06);
  transition: transform 200ms var(--fu-ease-out), box-shadow 200ms var(--fu-ease-out);
}
a.fu-template:is(:hover, :focus-visible) :is(img, .fu-template__blank) { transform: translateY(-3px); box-shadow: 0 4px 8px rgb(10 10 10 / 0.10), 0 14px 28px rgb(10 10 10 / 0.14); }
a.fu-template:is(:hover, :focus-visible) .fu-template__name { color: var(--fu-pen); }
a.fu-template .fu-template__body { padding: var(--fu-space-3) 0 0; }
a.fu-template :is(.fu-template__name, .fu-template__by) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.fu-template .fu-template__by { line-height: 1.45; min-block-size: 1.45em; }
/* Missing cover: the template's name, centred on the sunk tone, in plain UI type. */
.fu-template__blank { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; padding: var(--fu-space-4); background: var(--fu-surface-sunk); color: var(--fu-ink-muted); font-weight: 600; text-align: center; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { a.fu-template:is(:hover, :focus-visible) :is(img, .fu-template__blank) { transform: none; } }
.fu-contrib { margin: 0; padding-block: var(--fu-space-3); border-block-start: 1px solid var(--fu-rule); font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
.fu-contrib a { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-weight: 600; }
/* Closing band for couples: the one velvet surface below the top bar, same shape as the gallery's action bar. */
.fu-closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fu-space-4) var(--fu-space-6); margin-block-start: var(--fu-space-3); padding: var(--fu-space-6) var(--fu-space-5); background: var(--fu-velvet); color: var(--fu-on-velvet); border-radius: var(--fu-radius); }
.fu-closing h2 { margin: 0; color: var(--fu-on-velvet); }
.fu-closing__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fu-space-2) var(--fu-space-4); }
.fu-closing__action p { margin: 0; color: var(--fu-on-velvet-muted); }
.fu-closing [role="button"] { margin: 0; min-inline-size: 12rem; background: var(--fu-on-velvet); border-color: var(--fu-on-velvet); color: var(--fu-velvet); }
.fu-closing [role="button"]:hover { background: var(--fu-on-velvet-hover); border-color: var(--fu-on-velvet-hover); color: var(--fu-velvet); }
.fu-closing [role="button"]:focus-visible { outline-color: var(--fu-on-velvet); }
@media (max-width: 599.98px) { .fu-closing__action, .fu-closing [role="button"] { inline-size: 100%; } }

/* ---------- Homepage voice (adapted from Zate/Zawa, kept inside Buku Tamu) ---------- */
/* Persuade page: the hero title steps past the app ladder; everything else stays on it. */
.fu-hero h1 { font-size: clamp(1.875rem, 1.1rem + 3.2vw, 3rem); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; margin-block-end: var(--fu-space-5); }
/* The pen underline: what the couple writes is pen-blue, so the one word they own gets the stroke. */
.fu-scribble { position: relative; white-space: nowrap; }
.fu-scribble svg { position: absolute; inset-inline-start: -0.04em; inset-block-end: -0.22em; inline-size: calc(100% + 0.08em); block-size: 0.32em; overflow: visible; pointer-events: none; }
.fu-scribble path { fill: none; stroke: var(--fu-pen); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fu-scribble 700ms var(--fu-ease-out) 250ms forwards; }
@keyframes fu-scribble { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .fu-scribble path { animation: none; stroke-dashoffset: 0; } }

/* "Coba nama" in the hero: two signature lines on a guest-book card. Names are the couple's, so Young Serif in pen ink. */
.fu-try { max-inline-size: 34rem; margin: 0; padding: 0; }
.fu-try__title { margin: 0; font-weight: 650; text-wrap: balance; }
/* Caption under the bar, like the printed label under a signature. */
/* Same filled bar as the editor; the names keep the serif because they are the couple's. */
/* Quiet text action: "Buat undangan" stays the hero's only filled button. */
.fu-try > .fu-meta { margin: 0; }
@media (min-width: 600px) {
}

.fu-peek { display: none; }
@media (min-width: 900px) {
  /* The reception table: a velvet panel the phone stands on, slightly turned, a WhatsApp bubble peeking out. */
  .fu-hero__sample { position: relative; align-self: start; padding: var(--fu-space-5) var(--fu-space-5) var(--fu-space-4); background: var(--fu-velvet); border-radius: calc(var(--fu-radius) * 2); color: var(--fu-on-velvet); }
  .fu-hero__sample figcaption { color: var(--fu-on-velvet-muted); }
  .fu-hero__sample figcaption a { color: var(--fu-on-velvet); }
  .fu-hero__sample .fu-tag { color: var(--fu-on-velvet); border-color: rgb(255 255 255 / 0.55); }
  .fu-hero__sample .fu-demo__note { color: var(--fu-on-velvet-muted); }
  .fu-hero__sample .fu-demo__tabs { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.22); }
  .fu-hero__sample .fu-demo__tabs button { color: var(--fu-on-velvet); }
  .fu-hero__sample .fu-demo__tabs button:hover { background: rgb(255 255 255 / 0.12); }
  .fu-hero__sample .fu-demo__tabs button[aria-selected="true"] { background: var(--fu-on-velvet); color: var(--fu-velvet); }
  .fu-hero__sample .fu-demo__tabs button:focus-visible { outline-color: var(--fu-on-velvet); }
  .fu-hero__sample :is(a, button):focus-visible { outline-color: var(--fu-on-velvet); }
  /* Sized from the viewport height so the whole phone, tabs and note fit the first screen. */
  .fu-hero__sample .fu-phone-frame { inline-size: min(100%, max(15rem, calc((100svh - 19rem) * 390 / 760))); border-color: rgb(255 255 255 / 0.28); box-shadow: 0 4px 10px rgb(0 0 0 / 0.18), 0 24px 48px rgb(0 0 0 / 0.28); }
  #demo-undangan .fu-phone-frame { transform: rotate(-1.5deg); transition: transform 320ms var(--fu-ease-out); }
  #demo-undangan:is(:hover, :focus-within) .fu-phone-frame { transform: none; }
  .fu-peek { display: block; position: absolute; z-index: 2; inset-inline-start: -3rem; inset-block-start: 58%; max-inline-size: 12.5rem; margin: 0; padding: var(--fu-space-2) var(--fu-space-3) var(--fu-space-1); background: var(--fu-wa-bubble); color: var(--fu-ink); border-radius: 0.75rem 0.75rem 0.75rem 0.25rem; box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 14px 30px rgb(0 0 0 / 0.18); font-size: var(--fu-text-meta); line-height: 1.4; transform: rotate(2.5deg); transition: opacity 220ms var(--fu-ease-out), visibility 220ms; pointer-events: none; }
  .fu-peek b { display: block; font-weight: 650; }
  .fu-peek span { display: flex; justify-content: flex-end; align-items: center; gap: 0.125rem; color: var(--fu-wa-meta); }
  .fu-peek .fu-icon { inline-size: 1rem; block-size: 1rem; color: var(--fu-wa-tick); }
  /* Only beside the invitation; the WA tab shows the real thing. */
  .fu-demo:has(#demo-undangan[data-inactive]) .fu-peek { opacity: 0; visibility: hidden; }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) { #demo-undangan .fu-phone-frame { transform: none; } }

/* Demo tabs: one segmented control; the selected step takes velvet like the gallery filter. */
.fu-demo__tabs { display: flex; gap: 2px; inline-size: fit-content; max-inline-size: 100%; margin: 0 auto var(--fu-space-3); padding: 3px; border: 1px solid var(--fu-rule); border-radius: 999px; background: var(--fu-surface); }
.fu-demo__tabs[hidden] { display: none; }
.fu-demo__tabs button { inline-size: auto; margin: 0; min-block-size: 2.75rem; padding: 0 var(--fu-space-3); border: 0; border-radius: 999px; background: none; color: var(--fu-ink); font-size: var(--fu-text-body); font-weight: 600; white-space: nowrap; transition: background-color 160ms var(--fu-ease-out), color 160ms var(--fu-ease-out); }
.fu-demo__tabs button:hover { background: var(--fu-surface-sunk); }
.fu-demo__tabs button[aria-selected="true"] { background: var(--fu-pen); color: #fff; }
.fu-demo__tabs button:focus-visible { outline: 2px solid var(--fu-pen); outline-offset: 2px; box-shadow: none; }
/* One grid cell for every panel: the tallest sets the height, so switching never moves the page and large text still grows it. */
.fu-demo__panels { display: grid; gap: var(--fu-space-5); }
[data-tabs-ready] .fu-demo__panel { grid-area: 1 / 1; transition: opacity 220ms var(--fu-ease-out), visibility 220ms; }
.fu-demo__panel[data-inactive] { visibility: hidden; opacity: 0; }
.fu-demo__note { margin: var(--fu-space-2) 0 0; font-size: var(--fu-text-meta); color: var(--fu-ink-muted); text-align: center; }
/* Drawn frames grow with their content (aspect-ratio is only a minimum while overflow stays visible). */
.fu-phone-frame:is(.fu-chat, .fu-demo-rsvp) { display: flex; flex-direction: column; overflow: visible; }

/* WhatsApp chat: WhatsApp's own light palette, scoped here because it depicts their app, not ours. */
.fu-chat { background: radial-gradient(rgb(0 0 0 / 0.045) 1px, transparent 1.5px) 0 0 / 14px 14px, var(--fu-wa-bg); }
.fu-chat__head { display: flex; align-items: center; gap: var(--fu-space-3); padding: var(--fu-space-3) var(--fu-space-4); background: var(--fu-wa-head); color: #fff; border-start-start-radius: inherit; border-start-end-radius: inherit; }
.fu-chat__head b { display: block; line-height: 1.3; }
.fu-chat__head span span { display: block; font-size: var(--fu-text-meta); color: rgb(255 255 255 / 0.8); }
.fu-chat__day { align-self: center; margin-block-end: var(--fu-space-3); padding: 0.125rem 0.75rem; background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 1px rgb(0 0 0 / 0.08); font-size: var(--fu-text-meta); color: var(--fu-wa-meta); text-transform: uppercase; letter-spacing: 0.02em; }
.fu-chat__avatar { display: grid; place-items: center; flex: none; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--fu-wa-avatar); color: var(--fu-ink); font-size: var(--fu-text-meta); font-weight: 650; }
.fu-chat__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--fu-space-4) var(--fu-space-3); }
.fu-wa__bubble.fu-chat__out { position: relative; align-self: flex-end; inline-size: calc(100% - 0.5rem); max-inline-size: 19rem; margin-inline-end: 0.5rem; padding: 0.25rem; background: var(--fu-wa-bubble); border-radius: 0.5rem 0 0.5rem 0.5rem; }
/* The outgoing tail at the top right, cut from the bubble's own green. */
.fu-wa__bubble.fu-chat__out::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-end: -0.5rem; border-style: solid; border-width: 0 0 0.625rem 0.5rem; border-color: transparent transparent transparent var(--fu-wa-bubble); }
.fu-chat__out .fu-wa__card { background: #d1f4cc; border-radius: 0.375rem; }
.fu-chat__out .fu-wa__meta span { color: var(--fu-wa-meta); }
.fu-chat__out .fu-wa__card img { aspect-ratio: 1.91 / 1; }
.fu-chat__text { margin: var(--fu-space-2) var(--fu-space-2) 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.4; color: var(--fu-ink); }
.fu-chat__time { display: flex; justify-content: flex-end; align-items: center; gap: 0.125rem; padding: 0 var(--fu-space-2) 0.125rem; font-size: var(--fu-text-meta); color: var(--fu-wa-meta); }
.fu-chat__time .fu-icon { inline-size: 1rem; block-size: 1rem; color: var(--fu-wa-tick); }
.fu-chat__time .fu-icon + .fu-icon { margin-inline-start: -0.625rem; }

/* RSVP panel: the couple's own summary screen, published, so the gilt rule is earned. */
.fu-demo-rsvp { background: var(--fu-page); }
.fu-demo-rsvp__couple { margin: 0; padding: var(--fu-space-5) var(--fu-space-4) var(--fu-space-4); background: var(--fu-pen); color: #fff; font-family: var(--fu-font-name); font-size: var(--fu-text-heading); line-height: 1.3; overflow-wrap: anywhere; border-start-start-radius: inherit; border-start-end-radius: inherit; border-block-end: 3px solid var(--fu-gilt); }
.fu-demo-rsvp__body { padding: var(--fu-space-4); }
.fu-demo-rsvp__label { margin: 0 0 var(--fu-space-1); font-weight: 650; }
.fu-demo-rsvp__counts { display: flex; flex-wrap: wrap; gap: var(--fu-space-1) var(--fu-space-4); margin: var(--fu-space-2) 0 var(--fu-space-5); padding: 0 0 var(--fu-space-3); border-block-end: 1px solid var(--fu-rule); font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
.fu-demo-rsvp__counts li { list-style: none; margin: 0; }
.fu-demo-rsvp__counts .fu-num { color: var(--fu-ink); font-weight: 650; }
.fu-demo-rsvp .fu-wish { padding-block: var(--fu-space-3); }

/* Biasanya vs Di freeundangan: two columns, pen marks instead of stock ticks. */
/* ---------- Public footer: link columns over a giant fading wordmark ---------- */
body > footer.fu-footer { margin: 0; padding: 0; background: var(--fu-surface-sunk); border-block-start: 3px solid; border-image: linear-gradient(90deg, var(--fu-velvet), color-mix(in srgb, var(--fu-velvet) 12%, transparent)) 1; overflow: clip; }
.fu-footer__inner { display: grid; gap: var(--fu-space-6); max-inline-size: 72rem; margin-inline: auto; padding: var(--fu-space-6) var(--fu-gutter) var(--fu-space-5); }
@media (min-width: 900px) { .fu-footer__inner { grid-template-columns: minmax(0, 1fr) auto; } .fu-footer__base { grid-column: 1 / -1; } }
.fu-footer__mark { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-family: var(--fu-font-name); font-size: var(--fu-text-heading); color: var(--fu-velvet); text-decoration: none; }
.fu-footer__brand p { margin: var(--fu-space-1) 0 0; max-inline-size: 30rem; color: var(--fu-ink-muted); }
.fu-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--fu-space-4) var(--fu-space-6); }
@media (min-width: 900px) { .fu-footer__nav { grid-template-columns: repeat(3, auto); gap: var(--fu-space-7); } }
.fu-footer__nav h2 { margin: 0 0 var(--fu-space-1); font-size: var(--fu-text-meta); font-weight: 650; color: var(--fu-ink-muted); }
/* Pico lays out every nav ul as a flex row with edge margins; these are plain stacked columns. */
.fu-footer .fu-footer__nav ul { display: block; margin: 0; padding: 0; }
.fu-footer .fu-footer__nav li { display: block; list-style: none; margin: 0; padding: 0; }
.fu-footer .fu-footer__nav a { margin: 0; padding: 0; display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--fu-ink); text-decoration: none; }
.fu-footer__nav a:hover { color: var(--fu-pen); text-decoration: underline; text-underline-offset: 0.25em; }
.fu-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--fu-space-1) var(--fu-space-4); padding-block-start: var(--fu-space-4); border-block-start: 1px solid var(--fu-rule); }
.fu-footer__base p { margin: 0; font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
/* Decorative: solid tinted velvet faded with a mask (no gradient text), clipped by the footer so it never widens the page. */
.fu-footer__giant { margin: 0 0 -0.14em; font-family: var(--fu-font-name); font-size: clamp(2.75rem, 12.6vw, 10.5rem); line-height: 0.9; letter-spacing: -0.01em; text-align: center; white-space: nowrap; color: color-mix(in srgb, var(--fu-velvet) 16%, var(--fu-surface-sunk)); -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 95%); mask-image: linear-gradient(to bottom, #000 20%, transparent 95%); user-select: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .fu-scribble path { stroke: CanvasText; }
  .fu-section::before { outline: 1px solid CanvasText; }
  .fu-section::after { forced-color-adjust: none; background: Highlight; }
  .fu-chip { border: 1px solid CanvasText; }
}

/* ---------- Contributor pages ---------- */
.fu-page .fu-notice { margin-block: var(--fu-space-4); border-radius: var(--fu-radius); }
.fu-raw textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fu-text-meta); }

/* ---------- Help and reference (read mode: 70ch measure, tables and code scroll inside) ---------- */
.fu-doc { max-inline-size: 70ch; }
.fu-doc > section { padding-block: var(--fu-space-5); border-block-start: 1px solid var(--fu-rule); scroll-margin-block-start: var(--fu-space-4); }
.fu-doc h2 { margin-block-end: var(--fu-space-3); }
.fu-doc h3 { font-size: var(--fu-text-body); margin-block: var(--fu-space-5) var(--fu-space-2); }
.fu-doc__lede { color: var(--fu-ink-muted); }
.fu-doc__crumb { margin: 0 0 var(--fu-space-2); font-size: var(--fu-text-meta); }
.fu-doc__note { font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
.fu-doc__toc ol { margin: 0; padding-inline-start: 1.25rem; }
.fu-doc__toc li { list-style: decimal; padding-block: var(--fu-space-1); }
.fu-doc code { font-size: 0.875em; overflow-wrap: anywhere; }
.fu-doc pre { padding: var(--fu-space-4); background: var(--fu-surface-sunk); border: 1px solid var(--fu-rule); border-radius: var(--fu-radius); overflow-x: auto; font-size: var(--fu-text-meta); line-height: 1.5; }
.fu-doc pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.fu-doc__scroll { overflow-x: auto; margin-block-end: var(--fu-space-4); }
.fu-doc__scroll:focus-visible { outline-offset: 0; }
.fu-doc table { margin: 0; font-size: var(--fu-text-meta); }
.fu-doc th { font-weight: 600; white-space: nowrap; }
.fu-doc td { vertical-align: top; }
.fu-doc td:first-child { white-space: nowrap; }
.fu-doc td:last-child { color: var(--fu-ink-muted); overflow-wrap: anywhere; min-inline-size: 12rem; }
.fu-doc__origins { padding-inline-start: 1.25rem; }

/* Admin review queue: the same rows as "Template saya" (cover, name, status chip, meta, note), with the decision
   on the right and the diff or reject form under the row. Phones stack the buttons under the text. */
/* Scroll wrappers must contain absolutely positioned children (visually hidden labels), or they escape and widen the page. */
.overflow-auto { position: relative; }
/* nav.* beats Pico's negative nav margins. */
nav.fu-rv-tabs { margin-block: var(--fu-space-4) var(--fu-space-5); }
nav.fu-rv-tabs ul { display: flex; flex-wrap: wrap; gap: var(--fu-space-2); margin: 0; padding: 0; }
.fu-rv-tabs li { list-style: none; margin: 0; padding: 0; }
nav.fu-rv-tabs a { margin: 0; display: inline-flex; align-items: center; min-block-size: 2.5rem; padding: 0 var(--fu-space-4); border: 1px solid var(--fu-rule); border-radius: 999px; color: var(--fu-ink); font-weight: 600; text-decoration: none; }
.fu-rv-tabs a:hover { background: var(--fu-surface-sunk); }
.fu-rv-tabs a[aria-current="page"] { background: var(--fu-ink); border-color: var(--fu-ink); color: var(--fu-surface); }
.fu-rv-count { margin: var(--fu-space-5) 0 var(--fu-space-2); }
.fu-rvs { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--fu-rule); }
.fu-rv { list-style: none; margin: 0; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; column-gap: var(--fu-space-4); row-gap: 0.25rem; align-items: start;
  grid-template-areas: "thumb name actions" "thumb status actions" "thumb meta actions" "thumb note actions" "more more more";
  padding: var(--fu-space-4) var(--fu-space-2); border-block-end: 1px solid var(--fu-rule); }
.fu-rv > .fu-tpl__thumb { grid-area: thumb; align-self: start; }
.fu-rv__name { grid-area: name; margin: 0; font-size: var(--fu-text-body); font-weight: 650; letter-spacing: 0; overflow-wrap: anywhere; }
.fu-rv > .fu-status { grid-area: status; justify-self: start; }
.fu-rv__meta { grid-area: meta; margin: 0; font-size: var(--fu-text-meta); color: var(--fu-ink-muted); overflow-wrap: anywhere; }
.fu-rv__note { grid-area: note; margin: 0; font-size: var(--fu-text-meta); color: var(--fu-error); }
.fu-rv__actions { grid-area: actions; align-self: center; justify-content: flex-end; margin: 0; }
.fu-rv .fu-rv__actions form { margin: 0; container-type: normal; }   /* .fu-page form sets inline-size containment, which sizes it to 0 here */
/* Pico makes submit buttons full width, which collapses them in this auto-sized column. */
.fu-rv__actions button, .fu-rv__actions [role="button"] { margin: 0; inline-size: auto; white-space: nowrap; }
.fu-rv__preview { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 2.75rem; padding-inline: var(--fu-space-2); font-weight: 600; }
.fu-rv__more { grid-area: more; margin-block-start: var(--fu-space-2); padding-inline-start: calc(3rem + var(--fu-space-4)); }
.fu-rv__more .fu-meta { margin: 0; }
.fu-rv__more details { margin: 0; }
.fu-rv__more pre { max-height: 24rem; overflow: auto; font-size: var(--fu-text-meta); }
.fu-rv__reject { margin-block-start: var(--fu-space-3); max-inline-size: 32rem; }
@media (max-width: 599.98px) {
  .fu-rv { grid-template-columns: 3rem minmax(0, 1fr); grid-template-areas: "thumb name" "thumb status" "thumb meta" "thumb note" "actions actions" "more more"; }
  .fu-rv__actions { justify-content: flex-start; margin-block-start: var(--fu-space-2); }
  .fu-rv__more { padding-inline-start: 0; }
}

/* ---------- List blocks: gifts, story, gallery ---------- */
/* One repeated item (Rekening 1, Babak 2): its own class, since .fu-row is now a single field row */
.fu-group { border: 0; border-block-start: 1px solid var(--fu-rule); padding: var(--fu-space-4) 0 0; margin-block-end: var(--fu-space-4); }
.fu-group > legend { float: left; inline-size: 100%; padding: 0; margin-block-end: var(--fu-space-3); }
.fu-group > legend + * { clear: both; }
.fu-row__actions, .fu-gallery__actions { display: flex; gap: var(--fu-space-2); flex-wrap: wrap; }
.fu-row__actions button, .fu-gallery__actions button { inline-size: auto; margin: 0; padding-inline: var(--fu-space-3); }
button.fu-add { width: auto; display: inline-flex; gap: var(--fu-space-2); align-items: center; inline-size: auto; margin-block-end: var(--fu-space-5); }
.fu-quota { font-weight: 600; margin-block: 0 var(--fu-space-3); }
.fu-upload { margin-block-end: var(--fu-space-4); }
.fu-gallery { list-style: none; padding: 0; margin: 0 0 var(--fu-space-5); }
.fu-gallery__item { list-style: none; margin: 0; padding-block: var(--fu-space-3); border-block-end: 1px solid var(--fu-rule); display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--fu-space-2) var(--fu-space-3); align-items: center; }
.fu-gallery__item img { inline-size: 5.5rem; aspect-ratio: 1; object-fit: cover; border-radius: var(--fu-radius); background: var(--fu-surface-sunk); }
/* Drag to reorder (editor.js + Sortable): a grip in each item; Naik/Turun stay for keyboard and screen readers */
.fu-drag { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; margin-inline: -0.5rem 0.125rem;
  vertical-align: middle; border-radius: 0.625rem; color: var(--fu-ink-muted); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.fu-drag .fu-icon { inline-size: 1.25rem; block-size: 1.25rem; }
.fu-drag:hover { background: var(--fu-surface-sunk); color: var(--fu-ink); }
.fu-drag:active { cursor: grabbing; }
.fu-gallery__item:has(> .fu-drag) { grid-template-columns: 2.75rem 5.5rem 1fr; }
.fu-gallery__item > .fu-drag { margin: 0; }
fieldset.fu-group:not(.fu-drag-float):only-of-type .fu-drag, .fu-gallery__item:only-child > .fu-drag { display: none; }
.fu-gallery__item:only-child:has(> .fu-drag) { grid-template-columns: 5.5rem 1fr; }
.fu-drag-chosen { background: var(--fu-surface); border-radius: 1rem; box-shadow: 0 12px 32px rgb(10 10 10 / 0.12); }
.fu-drag-ghost { opacity: 0.35; }
.fu-drag-float { opacity: 0.95 !important; background: var(--fu-surface); border-radius: 1rem; box-shadow: 0 18px 40px rgb(10 10 10 / 0.18); }
/* Sortable cards (Kisah, Amplop): each item is a lifted white card; its header strip is the grab handle.
   Rules also match .fu-drag-float: Sortable moves the floating copy to <body> while dragging. */
.fu-group-list { display: grid; gap: var(--fu-space-4); margin-block-end: var(--fu-space-4); }
:is(.fu-group-list > .fu-group, .fu-group.fu-drag-float) { margin: 0; padding: 0 var(--fu-space-4) var(--fu-space-4); background: var(--fu-surface); border: 1px solid var(--fu-rule);
  border-radius: 1.25rem; box-shadow: 0 1px 2px rgb(10 10 10 / 0.04), 0 6px 18px rgb(10 10 10 / 0.05); transition: box-shadow 200ms var(--fu-ease-out), border-color 200ms var(--fu-ease-out); }
:is(.fu-group-list > .fu-group, .fu-group.fu-drag-float) > legend { display: flex; align-items: center; gap: var(--fu-space-2); min-block-size: 3.25rem; margin: 0 0 var(--fu-space-3);
  border-block-end: 1px solid var(--fu-rule); font-weight: 650; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
:is(.fu-group-list > .fu-group, .fu-group.fu-drag-float) > legend::after { content: "Geser untuk mengurutkan"; content: "Geser untuk mengurutkan" / ""; margin-inline-start: auto;
  font-size: var(--fu-text-meta); font-weight: 500; color: var(--fu-ink-muted); }
:is(.fu-group-list, .fu-group.fu-drag-float) .fu-drag { inline-size: 2.25rem; block-size: 2.25rem; margin: 0; background: var(--fu-surface-sunk); border: 1px solid var(--fu-rule); }
.fu-group-list > .fu-group:hover { border-color: var(--fu-rule-strong); box-shadow: 0 2px 4px rgb(10 10 10 / 0.05), 0 12px 28px rgb(10 10 10 / 0.08); }
.fu-group-list > .fu-group:hover .fu-drag { color: var(--fu-pen); border-color: var(--fu-pen-tint); background: var(--fu-pen-tint); }
:is(.fu-group-list > .fu-group, .fu-group.fu-drag-float) > legend:active { cursor: grabbing; }
/* Nothing to reorder with one item: a plain card header, no grab affordance */
.fu-group-list > .fu-group:only-of-type > legend { cursor: auto; touch-action: auto; }
.fu-group-list > .fu-group:only-of-type > legend::after { content: none; }
@media (max-width: 22rem) { :is(.fu-group-list > .fu-group, .fu-group.fu-drag-float) > legend::after { content: "Geser" / ""; } }
/* While dragging: the card in hand is opaque, slightly tilted, deep shadow; its old place becomes a dashed drop slot */
.fu-group.fu-drag-float { opacity: 1 !important; rotate: -1deg; border-color: var(--fu-pen); box-shadow: 0 24px 48px rgb(10 10 10 / 0.2); cursor: grabbing; }
.fu-group.fu-drag-float .fu-drag { color: var(--fu-pen); background: var(--fu-pen-tint); border-color: var(--fu-pen-tint); }
.fu-group-list > .fu-group.fu-drag-ghost { opacity: 1; background: var(--fu-pen-tint); border: 2px dashed var(--fu-pen); box-shadow: none; }
.fu-group-list > .fu-group.fu-drag-ghost > * { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .fu-group.fu-drag-float { rotate: none; } }
.fu-gallery__item .fu-field-error { grid-column: 1 / -1; margin: 0; }
.fu-gallery__actions button { flex: 1 1 0; max-inline-size: 7rem; }
/* ---------- Guest list (Buku Tamu: one signature line per guest) ---------- */
.fu-guests { max-inline-size: 72rem; margin-inline: auto; padding: var(--fu-space-5) var(--fu-gutter) var(--fu-space-7); display: grid; gap: var(--fu-space-6); }
.fu-guests > * { min-inline-size: 0; }
.fu-guests h2 { margin-block: 0 var(--fu-space-2); }
.fu-guests__lede { color: var(--fu-ink-muted); margin-block: 0 var(--fu-space-4); max-inline-size: 40rem; }
.fu-guests__lede a { white-space: nowrap; }
@media (min-width: 1024px) {
  .fu-guests { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .fu-wa-template { position: sticky; inset-block-start: var(--fu-space-4); }
}
.fu-guest__fields { display: grid; gap: 0 var(--fu-space-3); }
.fu-guest__fields label { margin: 0; }
.fu-guest__fields input { margin-block: var(--fu-space-1) var(--fu-space-3); }
.fu-guest-add { margin: 0; padding-block-end: var(--fu-space-2); }
.fu-guest-add button { display: inline-flex; align-items: center; justify-content: center; gap: var(--fu-space-2); margin-block-end: var(--fu-space-3); }
@media (min-width: 768px) {
  .fu-guest-add .fu-guest__fields { grid-template-columns: minmax(0, 1.6fr) 7.5rem minmax(0, 1.6fr) auto; align-items: end; }
  .fu-guest__edit .fu-guest__fields { grid-template-columns: minmax(0, 1.6fr) 7.5rem minmax(0, 1.6fr); }
}

.fu-guest-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0 var(--fu-space-4); border-block-end: 1px solid var(--fu-rule); }
.fu-guest-filter a { display: inline-flex; align-items: center; gap: var(--fu-space-2); min-block-size: var(--fu-touch); color: var(--fu-ink-muted); font-weight: 600; text-decoration: none; border-block-end: 2.5px solid transparent; margin-block-end: -1px; }
.fu-guest-filter a:hover { color: var(--fu-ink); }
.fu-guest-filter a[aria-current="page"] { color: var(--fu-ink); border-block-end-color: var(--fu-pen); }
.fu-guest-filter .fu-guest-filter__rsvp { margin-inline-start: auto; gap: var(--fu-space-1); color: var(--fu-pen); }

.fu-guest-list { margin: 0; padding: 0; }
.fu-guest-list li { padding: 0; }
.fu-guest-list:has(li) ~ .fu-guest-empty { display: none; }
.fu-guest-csv { margin-block-start: var(--fu-space-5); }
.fu-guest-csv__report ul { margin-block: var(--fu-space-2); }
.fu-guest-empty { color: var(--fu-ink-muted); padding-block: var(--fu-space-5); margin: 0; }
.fu-guest { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 0; }
.fu-guest:hover { background: none; }
.fu-guest::after { inset-inline-start: 0; inline-size: 100%; }
.fu-guest[data-status="partial"]::after { inline-size: calc(100% * var(--fill, 1)); }
.fu-guest__name { overflow-wrap: anywhere; }
.fu-guest__value { white-space: normal; }
.fu-guest__link { grid-column: 1 / -1; font-size: var(--fu-text-meta); color: var(--fu-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-guest__actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--fu-space-2); margin-block-start: var(--fu-space-3); }
.fu-guest__actions a[role="button"].secondary { background: var(--fu-surface); border-color: var(--fu-rule-strong); color: var(--fu-ink); }
.fu-guest__actions a[role="button"], .fu-guest__actions button { margin: 0; inline-size: 100%; display: inline-flex; align-items: center; justify-content: center; gap: var(--fu-space-2); }
.fu-guest__edit { grid-column: 1 / -1; margin: var(--fu-space-1) 0 0; }
.fu-guest details.fu-guest__edit > summary { display: flex; align-items: center; min-block-size: 2.75rem; color: var(--fu-pen); font-weight: 600; font-size: var(--fu-text-meta); }
.fu-guest__edit[open] > summary { margin-block-end: var(--fu-space-2); }
.fu-guest__edit form { margin: 0; }
.fu-guest__edit button[type="submit"] { inline-size: auto; margin-block-end: var(--fu-space-3); }
.fu-guest__edit button[type="submit"]:not(.fu-btn-link) { padding-inline: var(--fu-space-6); }
.fu-guest__delete { min-block-size: 2.75rem; }
@media (min-width: 768px) {
  .fu-guest { grid-template-columns: minmax(0, 1fr) 11rem auto; column-gap: var(--fu-space-4); }
  .fu-guest__name { grid-area: 1 / 1; }
  .fu-guest .fu-section__status { grid-area: 1 / 2; }
  .fu-guest__value { grid-area: 2 / 1; }
  .fu-guest__link { grid-area: 3 / 1 / 4 / 3; }
  .fu-guest__actions { grid-area: 1 / 3 / 4 / 4; align-self: center; margin: 0; }
  .fu-guest__edit { grid-area: 4 / 1 / 5 / -1; }
}

.fu-wa-template { background: var(--fu-surface); border: 1px solid var(--fu-rule); border-radius: var(--fu-radius); padding: var(--fu-space-4); }
.fu-wa-template form { margin: 0; }
.fu-wa-template textarea { margin-block: var(--fu-space-1) var(--fu-space-3); resize: vertical; field-sizing: content; min-block-size: 10rem; }
.fu-wa-template .fu-save { color: var(--fu-ink-muted); }
.fu-wa-template .fu-save[data-state="error"] { color: var(--fu-error); }
.fu-wa-preview { margin-block-start: var(--fu-space-3); padding-block-start: var(--fu-space-4); border-block-start: 1px solid var(--fu-rule); }
.fu-wa__text { margin: 0; padding: var(--fu-space-1) var(--fu-space-2); white-space: pre-wrap; color: var(--fu-ink); }
.fu-wa-preview .fu-field-error { margin-block: var(--fu-space-3) 0; }
/* ---------- Gallery (recedes like the landing: covers and the live preview lead) ---------- */
.fu-gallery-lede { max-inline-size: 40rem; margin-block-end: var(--fu-space-5); color: var(--fu-ink-muted); }
/* Gallery header: title on the left, the "Coba nama" card beside it on wide screens. */
.fu-gallery-head { display: grid; gap: var(--fu-space-4); margin-block-end: var(--fu-space-5); }
.fu-gallery-head .fu-gallery-lede { margin-block-end: 0; }
@media (min-width: 900px) { .fu-gallery-head { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: center; gap: var(--fu-space-7); } }
/* Gallery "coba nama" sits bare on the same rose stage as the landing mocks. */
.fu-gallery-head__stage { display: grid; place-items: center; padding: var(--fu-space-5) var(--fu-space-4); border-radius: 1.25rem; }
.fu-gallery-head__stage .fu-try { inline-size: 100%; }
.fu-gallery-head__stage .fu-meta { color: var(--fu-ink); }   /* muted grey drops under 4.5:1 on the pink */
/* Names form as one bar: collapsed on phones so the templates lead, then the status line once names are set. */
details.fu-gallery-try { display: block; place-items: normal; margin: 0; border-radius: 1.25rem; padding: var(--fu-space-2) var(--fu-space-4); border: 0; }
details.fu-gallery-try > summary { display: flex; align-items: center; gap: var(--fu-space-2); min-block-size: var(--fu-touch); margin: 0; padding: 0; font-weight: 650; color: var(--fu-ink); list-style: none; cursor: pointer; }
details.fu-gallery-try > summary::-webkit-details-marker { display: none; }
details.fu-gallery-try > summary::after { content: none; }
details.fu-gallery-try > summary > span:first-child { flex: 1; min-inline-size: 0; }
details.fu-gallery-try > summary strong { font-weight: 700; color: var(--fu-pen); overflow-wrap: anywhere; }
details.fu-gallery-try > summary .fu-icon { flex: none; transition: rotate 200ms var(--fu-ease-out); }
details.fu-gallery-try[open] > summary .fu-icon { rotate: 90deg; }
details.fu-gallery-try > summary:focus-visible { outline: 2px solid var(--fu-pen); outline-offset: 2px; border-radius: 0.5rem; }
.fu-gallery-try__edit { color: var(--fu-pen); text-decoration: underline; text-underline-offset: 0.2em; }
details.fu-gallery-try[open] .fu-gallery-try__edit { display: none; }
details.fu-gallery-try .fu-try { padding-block-end: var(--fu-space-2); }
details.fu-gallery-try .fu-try__bar { margin-block-start: 0; }
@media (min-width: 900px) { details.fu-gallery-try { padding: var(--fu-space-4) var(--fu-space-5); } }
@media (prefers-reduced-motion: reduce) { details.fu-gallery-try > summary .fu-icon { transition: none; } }
#galeri { scroll-margin-block-start: 5rem; }
.fu-gallery-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fu-space-2) var(--fu-space-4); margin-block-end: var(--fu-space-5); padding-block: var(--fu-space-2); border-block: 1px solid var(--fu-rule); }
.fu-gallery-bar > p { margin: 0; }
nav.fu-filter ul { display: flex; flex-wrap: wrap; gap: var(--fu-space-1); margin: 0; padding: 0; }
.fu-filter li { list-style: none; margin: 0; padding: 0; }
.fu-filter li a { display: inline-flex; align-items: center; min-block-size: 2.75rem; margin: 0; padding: 0 var(--fu-space-4); border-radius: 999px; color: var(--fu-ink); font-weight: 600; text-decoration: none; }
.fu-filter li a:hover { background: var(--fu-surface-sunk); }
.fu-filter li a[aria-current="page"] { background: var(--fu-pen); color: #fff; }
.fu-templates--gallery { gap: var(--fu-space-5) var(--fu-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
@media (min-width: 768px) { .fu-templates--gallery { grid-template-columns: repeat(auto-fill, minmax(max(12rem, (100% - 3 * var(--fu-space-4)) / 4), 1fr)); } }
.fu-templates--gallery a.fu-template :is(.fu-template__name, .fu-template__by) { white-space: normal; text-wrap: balance; }
/* Gallery tiles show the template at the homepage iPhone's screen ratio (9 / 19.5) and corner, without the frame.
   Thumbnails are 390x844 phone captures; others crop from the top so the cover stays in view. */
.fu-templates--gallery a.fu-template :is(img, .fu-template__blank) { aspect-ratio: 9 / 19.5; object-position: top; border-radius: 12% / 5.5%; }
/* Live tour (gallery-tour.js): the real preview laid out at 390px, scaled onto the tile and faded in over the thumbnail. */
.fu-template__media { position: relative; display: block; }
.fu-template__live { position: absolute; inset: 0 auto auto 0; inline-size: 390px; block-size: 844px; border: 0; border-radius: 12% / 5.5%; background: #fff;
  transform: scale(var(--s, 0.4)); transform-origin: 0 0; opacity: 0; pointer-events: none; transition: opacity 300ms var(--fu-ease-out), translate 200ms var(--fu-ease-out); }
.fu-template__live.is-on { opacity: 1; }
/* While a live preview loads: a small ring in the tile's top corner, clear of the cover's own buttons. */
.fu-template__media.is-loading::after { content: ""; position: absolute; z-index: 1; inset-block-start: 5%; inset-inline-end: 8%; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.45); border-block-start-color: #fff; background: rgb(10 10 10 / 0.45); box-shadow: 0 0 0 3px rgb(10 10 10 / 0.45); animation: fu-ring 800ms linear infinite; }
@media (prefers-reduced-motion: reduce) { .fu-template__live { transition: none; } .fu-template__media.is-loading::after { animation: none; } }
a.fu-template:is(:hover, :focus-visible) .fu-template__live { translate: 0 -3px; }
/* Template picker: gallery tiles as radio labels. The chosen cover gets the pen ring and plays its live preview (editor.js). */
.fu-templates--pick .fu-template { border: 0; background: none; overflow: visible; }
.fu-templates--pick .fu-template:has(input:checked) { box-shadow: none; }
.fu-templates--pick .fu-template :is(img, .fu-template__blank) { aspect-ratio: 9 / 19.5; object-position: top; border-radius: 12% / 5.5%; box-shadow: 0 1px 2px rgb(10 10 10 / 0.08), 0 2px 8px rgb(10 10 10 / 0.06); }
.fu-templates--pick .fu-template__media { border-radius: 12% / 5.5%; outline: 3px solid transparent; outline-offset: 3px; transition: outline-color 200ms var(--fu-ease-out); }
.fu-templates--pick .fu-template:has(input:checked) .fu-template__media { outline-color: var(--fu-pen); }
.fu-templates--pick .fu-template .fu-template__body { padding: var(--fu-space-3) 0 0; }
.fu-templates--pick .fu-template__check { z-index: 2; inset-block-start: var(--fu-space-3); inset-inline-end: var(--fu-space-3); }
h2.fu-template__name { margin: 0; font-size: var(--fu-text-body); line-height: 1.5; font-weight: 700; letter-spacing: 0; color: var(--fu-ink); }
.fu-gallery-empty { max-inline-size: 40rem; padding-block: var(--fu-space-5) var(--fu-space-6); }
.fu-gallery-empty p { margin: 0 0 var(--fu-space-2); }
.fu-pager { display: flex; justify-content: space-between; align-items: center; gap: var(--fu-space-4); margin-block-start: var(--fu-space-6); padding-block-start: var(--fu-space-3); border-block-start: 1px solid var(--fu-rule); }
.fu-pager a { font-weight: 600; min-block-size: 2.75rem; display: inline-flex; align-items: center; gap: var(--fu-space-1); }
.fu-crumb { margin: 0; font-size: var(--fu-text-meta); }
.fu-crumb a { display: inline-flex; align-items: center; gap: var(--fu-space-1); min-block-size: 2.75rem; font-weight: 600; }
.fu-crumb .fu-icon { inline-size: 1rem; block-size: 1rem; }
.fu-gallery-show { display: grid; gap: var(--fu-space-4); }
.fu-gallery-show__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--fu-space-2); }
.fu-gallery-show__title h1 { margin: 0; font-size: var(--fu-text-heading); line-height: 1.3; }
.fu-gallery-show__title p { margin: 0; }
.fu-gallery-show__info { padding-block-start: var(--fu-space-2); }
.fu-gallery-show__info .fu-badges { margin-block: 0 var(--fu-space-5); }
.fu-gallery-cta p { margin: 0 0 var(--fu-space-2); }
.fu-gallery-show__info details.fu-gallery-try { margin-block-end: var(--fu-space-5); }
.fu-gallery-show__assure { margin: var(--fu-space-3) 0 0; }
.fu-gallery-bar:not(:has(.fu-filter)) { border-block: 0; padding-block: 0; }   /* a lone count needs no rules */
.fu-gallery-show__info .fu-try { margin-block-end: var(--fu-space-5); }
.fu-gallery-show__pager a { min-inline-size: 0; }
.fu-gallery-show__pager a > span { display: grid; min-inline-size: 0; overflow-wrap: anywhere; }
.fu-gallery-show__pager a[rel="next"] > span { text-align: end; }
.fu-gallery-show__pager small { font-size: var(--fu-text-meta); font-weight: 450; color: var(--fu-ink-muted); }
.fu-gallery-show__pager a { text-decoration: none; }
.fu-gallery-show__pager .fu-pager__name { text-decoration: underline; text-underline-offset: 0.2em; }
/* Features read as a plain line, not as buttons or filter chips. */
.fu-badges--plain { gap: 0; }
.fu-badges--plain li { padding: 0; border: 0; border-radius: 0; font-size: var(--fu-text-meta); white-space: nowrap; }
.fu-badges--plain li:not(:last-child)::after { content: "·" / ""; margin-inline: 0.375rem; }   /* trails its item, so a wrapped line never starts with a dot */
/* Gallery full screen: the editor's preview dialog, at a phone's width on wide screens, with the action under it. */
dialog.fu-full[open] { display: flex; }
.fu-full :is(header, iframe), .fu-full__bar { inline-size: min(100%, 28rem); margin-inline: auto; }
.fu-full__bar { padding: var(--fu-space-3) var(--fu-gutter) calc(var(--fu-space-3) + env(safe-area-inset-bottom)); background: var(--fu-velvet); }
.fu-full__bar [role="button"] { display: flex; justify-content: center; align-items: center; inline-size: 100%; min-block-size: var(--fu-touch); margin: 0;
  background: var(--fu-on-velvet); border-color: var(--fu-on-velvet); color: var(--fu-velvet); }
.fu-full__bar [role="button"]:hover { background: var(--fu-on-velvet-hover); border-color: var(--fu-on-velvet-hover); }
.fu-gallery-cta [role="button"] { display: inline-flex; justify-content: center; align-items: center; margin: 0; }
/* Phones: preview first, the one action in a velvet bar under the thumb (same shape as the editor's action bar). */
@media (max-width: 767.98px) {
  .fu-gallery-show { padding-block-end: 7.5rem; }
  .fu-gallery-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 10; background: var(--fu-velvet); padding: var(--fu-space-3) var(--fu-gutter) calc(var(--fu-space-3) + env(safe-area-inset-bottom)); }
  .fu-gallery-cta p { color: var(--fu-on-velvet-muted); }
  .fu-gallery-cta [role="button"] { inline-size: 100%; min-block-size: var(--fu-touch); background: var(--fu-on-velvet); border-color: var(--fu-on-velvet); color: var(--fu-velvet); }
  .fu-gallery-cta [role="button"]:hover { background: var(--fu-on-velvet-hover); border-color: var(--fu-on-velvet-hover); }
  .fu-gallery-cta [role="button"]:focus-visible { outline-color: var(--fu-on-velvet); }
}
/* Wider: phone frame and details meet at the shell's centre line. */
@media (min-width: 768px) {
  .fu-gallery-show { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "crumb crumb" "frame head" "frame info"; gap: 0 var(--fu-space-7); align-items: start; }
  .fu-gallery-show > .fu-crumb { grid-area: crumb; margin-block-end: var(--fu-space-2); }
  .fu-gallery-show__head { grid-area: head; max-inline-size: 26rem; padding-block-start: var(--fu-space-4); }
  .fu-gallery-show__title { display: block; }
  .fu-gallery-show__title h1 { font-size: var(--fu-text-name); line-height: 1.2; margin-block-end: var(--fu-space-1); }
  .fu-gallery-show .fu-stage { grid-area: frame; justify-self: end; inline-size: min(100%, 26rem); }
  .fu-gallery-show .fu-iphone { --w: min(100%, 22rem); }
  .fu-gallery-show__info { grid-area: info; max-inline-size: 26rem; padding-block-start: var(--fu-space-5); }
  .fu-gallery-cta [role="button"] { min-inline-size: 16rem; }
}

/* ---------- Stage: the velvet reception table a preview stands on (gallery detail, login aside) ---------- */
.fu-stage { padding: var(--fu-space-5) var(--fu-space-4) var(--fu-space-4); background: var(--fu-velvet); color: var(--fu-on-velvet); border-radius: calc(var(--fu-radius) * 2); }
.fu-stage .fu-phone-frame { border-color: rgb(255 255 255 / 0.28); box-shadow: 0 4px 10px rgb(0 0 0 / 0.18), 0 24px 48px rgb(0 0 0 / 0.28); }
.fu-stage__note { margin: var(--fu-space-3) 0 0; font-size: var(--fu-text-meta); color: var(--fu-on-velvet-muted); text-align: center; }
@media (min-width: 768px) { .fu-stage { padding: var(--fu-space-6) var(--fu-space-6) var(--fu-space-4); } }
/* Gallery detail: the preview stands in the homepage's iPhone frame on the bare page, not on the velvet table (login keeps it). */
.fu-gallery-show .fu-stage { padding: 0; background: none; color: inherit; border-radius: 0; }
.fu-gallery-show .fu-stage .fu-iphone { margin-inline: auto; }
.fu-gallery-show .fu-stage__note { color: var(--fu-ink-muted); }

/* Pen-tick list (homepage comparison uses its own; this one sits on velvet). */
.fu-ticks { margin: 0; padding: 0; }
.fu-ticks li { list-style: none; display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--fu-space-2); align-items: start; margin: 0; padding-block: var(--fu-space-2); }
.fu-ticks .fu-icon { inline-size: 1.375rem; block-size: 1.375rem; margin-block-start: 0.0625rem; stroke-width: 2.25; }

/* ---------- Login: the button on the left, what signing in gives you on the right ---------- */
.fu-login { display: grid; gap: var(--fu-space-6); align-items: start; }
.fu-login__main [role="button"] { margin-block: var(--fu-space-2) var(--fu-space-3); min-inline-size: 16rem; }
.fu-login__main .fu-meta { max-inline-size: 26rem; }
.fu-login__aside h2 { margin: 0 0 var(--fu-space-2); font-size: var(--fu-text-heading); color: var(--fu-on-velvet); }
.fu-login__aside li { color: var(--fu-on-velvet); }
@media (min-width: 900px) { .fu-login { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: var(--fu-space-7); padding-block-start: var(--fu-space-6); } }

/* ---------- Help index: two doors ---------- */
.fu-doors { display: grid; gap: var(--fu-space-4); margin: var(--fu-space-5) 0 0; padding: 0; }
@media (min-width: 768px) { .fu-doors { grid-template-columns: 1fr 1fr; } }
.fu-doors > li { list-style: none; margin: 0; }
.fu-door { display: grid; gap: var(--fu-space-2); block-size: 100%; padding: var(--fu-space-5); background: var(--fu-surface); border: 1px solid var(--fu-rule); border-radius: var(--fu-radius); color: var(--fu-ink); text-decoration: none; transition: border-color 200ms var(--fu-ease-out), box-shadow 200ms var(--fu-ease-out), transform 200ms var(--fu-ease-out); }
.fu-door:hover { border-color: var(--fu-rule-strong); box-shadow: 0 4px 8px rgb(10 10 10 / 0.08), 0 14px 28px rgb(10 10 10 / 0.10); transform: translateY(-2px); }
.fu-door__icon { inline-size: 2rem; block-size: 2rem; color: var(--fu-velvet); }
.fu-door__title { font-size: var(--fu-text-heading); font-weight: 650; line-height: 1.3; }
.fu-door__text { color: var(--fu-ink-muted); }
.fu-door__go { display: inline-flex; align-items: center; gap: var(--fu-space-1); margin-block-start: var(--fu-space-2); color: var(--fu-pen); font-weight: 650; }
.fu-door:hover .fu-door__go { text-decoration: underline; text-underline-offset: 0.25em; }
@media (prefers-reduced-motion: reduce) { .fu-door:hover { transform: none; } }
.fu-doc:has(.fu-doors) { max-inline-size: 56rem; }

/* ---------- Guides: contents stick beside the text on wide screens ---------- */
@media (min-width: 1024px) {
  .fu-doc:has(> .fu-doc__toc) { display: grid; grid-template-columns: 14rem minmax(0, 70ch); column-gap: var(--fu-space-7); max-inline-size: none; }
  .fu-doc:has(> .fu-doc__toc) > * { grid-column: 2; }
  .fu-doc > .fu-doc__toc { grid-column: 1; grid-row: 1 / span 40; align-self: start; position: sticky; inset-block-start: var(--fu-space-5); padding-block-start: var(--fu-space-2); }
  /* Pico lays nav lists out as a row; here they stack. */
  .fu-doc > .fu-doc__toc ol { display: block; margin: 0; padding: 0; border-inline-start: 2px solid var(--fu-rule); }
  .fu-doc > .fu-doc__toc li { list-style: none; padding: 0; }
  .fu-doc > .fu-doc__toc a { display: block; margin-block: 0; padding: var(--fu-space-1) var(--fu-space-3); margin-inline-start: -2px; border-inline-start: 2px solid transparent; color: var(--fu-ink-muted); text-decoration: none; }
  .fu-doc > .fu-doc__toc a:hover { color: var(--fu-pen); border-inline-start-color: var(--fu-pen); }
}

/* Public pages: a short page still puts the footer at the bottom of the screen. */
body:has(> .fu-footer) { display: flex; flex-direction: column; min-block-size: 100svh; }
body:has(> .fu-footer) > main { flex: 1 0 auto; inline-size: 100%; }

/* ---------- RSVP summary and Buku Tamu (owner) ---------- */
.fu-rsvp__total { font-size: var(--fu-text-name); font-weight: 650; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 var(--fu-space-1); }
.fu-new { display: inline-block; vertical-align: 0.125em; margin-inline-start: var(--fu-space-1); padding: 0 0.4375rem; border-radius: 999px; background: var(--fu-pen-tint); color: var(--fu-pen); font-size: var(--fu-text-meta); font-weight: 650; line-height: 1.45; }
.fu-rsvp__msg { grid-column: 1 / -1; margin: var(--fu-space-1) 0 0; color: var(--fu-ink); white-space: pre-line; max-inline-size: 40rem; }
.fu-rsvp-row .fu-guest__actions { grid-template-columns: minmax(0, 1fr); }
/* Four tabs fit one line at 390px only with tighter gaps; scroll rather than wrap if a font runs wide. */
.fu-rsvp .fu-guest-filter { flex-wrap: nowrap; gap: 0 var(--fu-space-2); overflow-x: auto; scrollbar-width: none; }
.fu-rsvp .fu-guest-filter a { flex: none; gap: 0.375rem; white-space: nowrap; }
@media (min-width: 768px) {
  .fu-rsvp .fu-guest-filter { gap: 0 var(--fu-space-4); }
  .fu-rsvp-row { grid-template-columns: minmax(0, 1fr) 9rem 15rem; }
  .fu-rsvp-row .fu-guest__actions { justify-items: end; }
  .fu-rsvp-row .fu-rsvp__msg { grid-area: 2 / 1 / 3 / 3; }
  .fu-rsvp-row .fu-guest__actions a[role="button"] { inline-size: auto; }
}
.fu-wishes h2 { margin-block-end: var(--fu-space-1); }
.fu-wishes > .fu-meta { margin-block-end: var(--fu-space-3); }
.fu-wish-list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--fu-rule); }
.fu-wish-list:has(li) ~ .fu-guest-empty { display: none; }
.fu-wish { list-style: none; margin: 0; padding: var(--fu-space-4) 0 var(--fu-space-2); border-block-end: 1px solid var(--fu-rule); }
.fu-wish__text { margin: 0 0 var(--fu-space-2); white-space: pre-line; max-inline-size: 40rem; }
.fu-wish__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--fu-space-3); }
.fu-wish__by { margin: 0; font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
.fu-wish__by b { color: var(--fu-ink); font-weight: 650; }
.fu-wish form { margin: 0; }
.fu-wish__btn { min-block-size: 2.75rem; margin: 0; font-size: var(--fu-text-meta); }
.fu-wish--hidden { padding-block: var(--fu-space-2); }
.fu-toast { display: flex; align-items: center; gap: var(--fu-space-2); padding: 0 var(--fu-space-4); border-radius: var(--fu-radius); background: var(--fu-velvet); color: var(--fu-on-velvet); font-size: var(--fu-text-meta); font-weight: 600; }
.fu-toast .fu-btn-link { color: var(--fu-on-velvet); }
.fu-toast .fu-btn-link:focus-visible { outline-color: var(--fu-on-velvet); }
@media (min-width: 1024px) {
  .fu-rsvp { grid-template-columns: minmax(0, 1fr) 24rem; }
}

/* ---------- Clean SaaS pass (2026-10-21, after waymark-template.vercel.app; pink stays primary) ----------
   White page, tight sans headings, a floating pill nav, pill buttons, thin-bordered rounded cards,
   and one soft gradient wash behind the product demo instead of a sky on every page. */
:root { --fu-card-radius: 1rem; }
h1, h2, h3 { letter-spacing: -0.03em; }

/* Floating pill nav */
.fu-topbar { position: sticky; inset-block-start: 0; z-index: 40; padding: var(--fu-space-3) var(--fu-gutter) 0; background: transparent; --pico-nav-element-spacing-vertical: 0.25rem; --fu-on-velvet: var(--fu-ink); --fu-on-velvet-muted: var(--fu-ink-muted); }
.fu-topbar nav { max-inline-size: 70rem; min-block-size: 3.25rem; padding-block: 0; padding-inline: var(--fu-space-4) var(--fu-space-2); background: rgb(255 255 255 / 0.85); border: 1px solid rgb(229 229 229 / 0.7); border-radius: 1.5rem; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fu-topbar a { font-size: 0.875rem; font-weight: 500; }
.fu-topbar nav ul { margin-inline: 0; }   /* Pico's negative edge margin pushed the Masuk pill past the screen on phones */
.fu-wordmark { font-size: 1.125rem !important; }
/* Icon buttons (Masuk, account, phone menu): 40px circles; the label lives in aria-label.
   :is(summary:not([role])) outranks Pico's dropdown summary, which draws it as a select box. */
.fu-topbar :is(a, summary:not([role])).fu-nav-icon {
  display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; min-block-size: 2.75rem !important;
  margin: 0 0 0 var(--fu-space-1); padding: 0; border: 1px solid var(--fu-rule); border-radius: 999px;
  background: var(--fu-surface); color: var(--fu-ink); list-style: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.fu-topbar :is(a, summary:not([role])).fu-nav-icon:hover, .fu-topbar details[open] > summary.fu-nav-icon:not([role]) { background: var(--fu-surface-sunk); color: var(--fu-ink); }
.fu-topbar .fu-nav-icon::-webkit-details-marker { display: none; }
.fu-topbar .fu-nav-icon::after { content: none !important; }
.fu-topbar a.fu-nav-icon.fu-nav-icon--pen { background: var(--fu-pen); border-color: var(--fu-pen); color: #fff !important; }
.fu-topbar a.fu-nav-icon.fu-nav-icon--pen:hover { background: var(--fu-pen-hover); border-color: var(--fu-pen-hover); color: #fff !important; }
/* Pico rings a dropdown summary on any focus (even a click); keep the ring for keyboard focus only. */
.fu-topbar summary.fu-nav-icon:not([role]):focus { box-shadow: none; border-color: var(--fu-rule); }
.fu-topbar summary.fu-nav-icon:not([role]):focus-visible { outline: 2px solid var(--fu-pen); outline-offset: 2px; }
.fu-menu > summary { border-color: var(--fu-rule); border-radius: 999px; }
.fu-menu[open] > summary { background: var(--fu-surface-sunk); }
/* Menus (desktop account dropdown, phone panel): one card of compact rows; the current page reads in pen ink. */
.fu-topbar :is(.fu-account > ul, .fu-menu__panel) {
  padding: 0.375rem; background: var(--fu-surface); border: 1px solid var(--fu-rule); border-radius: 1rem;
  box-shadow: 0 12px 32px rgb(10 10 10 / 0.12); direction: ltr; text-align: start;
}
.fu-topbar .fu-account > ul { min-inline-size: 15rem; margin-block-start: var(--fu-space-2); }
.fu-topbar .fu-menu__panel { inset-inline: 0; inset-block-start: calc(100% + var(--fu-space-2)); margin: 0; }
.fu-topbar :is(.fu-account, .fu-menu__panel) :focus-visible { outline-offset: -2px; }
.fu-topbar :is(details.fu-account > summary + ul, .fu-menu__panel) > li { display: block; margin: 0; padding: 0; }   /* matches Pico's dropdown li:first-of-type weight */
.fu-topbar :is(.fu-account, .fu-menu__panel) form { margin: 0; }
.fu-topbar :is(.fu-account, .fu-menu__panel) :is(a, button) {
  display: flex; align-items: center; gap: 0.625rem; inline-size: 100%; min-block-size: 2.75rem; margin: 0; padding: 0 0.75rem;
  background: none; border: 0; border-radius: 0.625rem; color: var(--fu-ink); font-size: var(--fs-sm); font-weight: 500;
  line-height: 1.25rem; text-align: start; text-decoration: none;
}
.fu-topbar :is(.fu-account, .fu-menu__panel) :is(a, button):hover { background: var(--fu-surface-sunk); color: var(--fu-ink); }
.fu-topbar :is(.fu-account, .fu-menu__panel) a[aria-current="page"] { background: var(--fu-surface-sunk); color: var(--fu-pen); text-decoration: none; }
.fu-topbar :is(.fu-account, .fu-menu__panel) :is(a, button) .fu-icon { inline-size: 1.125rem; block-size: 1.125rem; color: var(--fu-ink-muted); }
.fu-topbar :is(details.fu-account > summary + ul, .fu-menu__panel) > li:is(.fu-account__who, .fu-menu__who) {
  overflow: hidden; padding: 0.5rem 0.75rem 0.375rem; font-size: 0.8125rem; line-height: 1.125rem; color: var(--fu-ink-muted);
  text-overflow: ellipsis; white-space: nowrap;
}
.fu-topbar .fu-menu__panel > li.fu-menu__who.fu-menu__who { margin-block-start: 0.375rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--fu-rule); }

/* Pill buttons; the secondary is a quiet grey fill */
:is(button, [type="submit"], [type="button"], [role="button"]) { border-radius: 999px; }
:is(button, [type="submit"], [type="button"], [role="button"]).secondary.outline { background: var(--fu-surface-sunk); border-color: transparent; color: var(--fu-ink); }
:is(button, [type="submit"], [type="button"], [role="button"]).secondary.outline:hover { background: #ececee; border-color: transparent; color: var(--fu-ink); }

/* Homepage hero (after finzo-astro.pages.dev): a badge with a travelling light on its rim, a light-weight
   headline whose last word turns italic serif, words rising in one by one, soft colour fields behind, and the live demo as a phone between two floating cards (desktop). */
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
.fu-note-pill { position: relative; display: inline-flex; margin: 0 0 var(--fu-space-5); padding: 1px; border-radius: 999px; background: var(--fu-rule); overflow: hidden; isolation: isolate; }
.fu-note-pill__ring { position: absolute; z-index: -1; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 60%; block-size: 1.5rem; translate: 0 -50%; transform-origin: left center; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--fu-pen)); animation: fu-ring 4s linear infinite; }
@keyframes fu-ring { to { rotate: 1turn; } }
.fu-note-pill__in { display: inline-flex; align-items: center; gap: var(--fu-space-2); padding: 0.3125rem 1rem 0.3125rem 0.375rem; border-radius: inherit; background: var(--fu-surface); font-size: 0.875rem; color: var(--fu-ink-muted); }
.fu-note-pill__in:not(:has(.fu-note-pill__faces)) { padding-inline-start: 1rem; }
.fu-note-pill b { color: var(--fu-pen); font-weight: 650; white-space: nowrap; }
.fu-note-pill__faces { flex: none; }
@media (max-width: 599.98px) { .fu-note-pill__in { font-size: var(--fu-text-meta); } .fu-hero h1 br { display: none; } }
.fu-note-pill__faces { display: inline-flex; }
.fu-note-pill__faces img { inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--fu-surface); }
.fu-note-pill__faces img + img { margin-inline-start: -0.5rem; }
.fu-hero h1 { font-weight: 400; font-size: clamp(2.5rem, 1rem + 5vw, 4.5rem); line-height: 1.12; letter-spacing: -0.035em; color: #2b2626; }
.fu-hero h1 em { font-family: "Instrument Serif", var(--fu-font-name); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--fu-pen); }
.fu-word { display: inline-block; animation: fu-word-in 700ms var(--fu-ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
@keyframes fu-word-in { from { opacity: 0; transform: translateY(0.4em); filter: blur(8px); } }
.fu-hero__cta [role="button"]:not(.secondary) { background: linear-gradient(var(--fu-pen), color-mix(in srgb, var(--fu-pen) 72%, white)); border-color: transparent; box-shadow: 0 10px 28px rgb(190 44 107 / 0.28); }
.fu-hero__cta [role="button"]:not(.secondary):hover { background: var(--fu-pen-hover); }
.fu-hero__cta .secondary.outline { background: var(--fu-surface); border: 1px solid var(--fu-rule); }
/* Colour fields: one full-width layer that clips itself, so nothing widens the page. */
.fu-hero { position: relative; }
.fu-hero__bg { position: absolute; z-index: -1; inset-block: -6rem 0; inset-inline: calc(50% - 50vw); overflow: hidden; pointer-events: none;
  background: radial-gradient(22% 30% at 32% 58%, rgb(251 207 225 / 0.7), transparent 70%), radial-gradient(22% 28% at 70% 66%, rgb(221 214 254 / 0.75), transparent 70%), radial-gradient(20% 22% at 50% 32%, rgb(254 226 200 / 0.45), transparent 70%); }
html { overflow-x: clip; }   /* backstop for 100vw plus a classic scrollbar */
@media (min-width: 900px) {
  .fu-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "try" "frame"; justify-items: center; text-align: center; padding-block-start: var(--fu-space-7); }
  .fu-hero h1, .fu-hero__text p { margin-inline: auto; }
  .fu-hero__text p:not(.fu-note-pill) { font-size: 1.125rem; }
  .fu-hero__cta .fu-btn-row { justify-content: center; }
  .fu-hero .fu-try { inline-size: min(100%, 34rem); text-align: start; }   /* justify-items: center shrinks the card to fit; its 0-min input columns would collapse */
  /* The demo: phone in the middle, the WhatsApp card left and the RSVP card right, all at once (tabs.js steps aside). */
  .fu-hero__sample { inline-size: min(100%, 64rem); margin-block-start: var(--fu-space-6); padding: 0; background: none; border: 0; box-shadow: none; color: var(--fu-ink); --fu-on-velvet: var(--fu-ink); --fu-on-velvet-muted: var(--fu-ink-muted); }
  .fu-hero__sample figcaption { justify-content: center; margin-block-end: var(--fu-space-4); }
  .fu-hero__sample .fu-tag { border-color: var(--fu-rule-strong); }
  .fu-peek { display: none !important; }
  [data-tabs-wide] .fu-demo__panels { grid-template-columns: 1fr 19rem 1fr; align-items: center; gap: var(--fu-space-6); }
  [data-tabs-wide] #demo-wa { order: 1; } [data-tabs-wide] #demo-undangan { order: 2; } [data-tabs-wide] #demo-rsvp { order: 3; }
  [data-tabs-wide] #demo-undangan .fu-phone-frame { inline-size: 19rem; max-inline-size: none; transform: none; }
  [data-tabs-wide] :is(#demo-wa, #demo-rsvp) .fu-phone-frame { aspect-ratio: auto; max-inline-size: 20rem; border: 1px solid rgb(255 255 255 / 0.9); border-radius: 1.75rem; background: linear-gradient(180deg, #fff, rgb(255 255 255 / 0.75)); box-shadow: 0 24px 60px rgb(10 10 10 / 0.10); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  [data-tabs-wide] #demo-wa { justify-self: end; margin-block-start: 6rem; }
  [data-tabs-wide] #demo-rsvp { justify-self: start; margin-block-start: -4rem; }
  [data-tabs-wide] .fu-chat__body { padding-block: var(--fu-space-3); }
  [data-tabs-wide] .fu-chat__out .fu-wa__card img { aspect-ratio: auto; block-size: 6.5rem; object-fit: cover; }
  [data-tabs-wide] .fu-chat__text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  [data-tabs-wide] .fu-demo-rsvp .fu-wish-list li:nth-child(n+2) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fu-word { animation: none; } .fu-note-pill__ring { animation: none; opacity: 0; } }
body { overflow-x: clip; }   /* the wash spreads past the demo card */
.fu-hero { isolation: isolate; }   /* keeps the wash (z-index -1) above the page colour and below the demo */

/* Thin-bordered rounded cards */
.fu-landing-block h2, .fu-closing h2 { font-weight: 650; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.25rem); line-height: 1.1; }

/* Closing band: a pink panel with a fine dot grid */
.fu-closing { background: radial-gradient(circle, rgb(255 255 255 / 0.18) 1px, transparent 1.5px) 0 0 / 14px 14px, var(--fu-pen); border-radius: calc(var(--fu-card-radius) * 1.5); }
.fu-closing [role="button"] { color: var(--fu-pen); }
.fu-closing [role="button"]:hover { color: var(--fu-pen-hover); }
.fu-closing__action p { color: #fde7f0; }

/* "Undangan digital, minus drama": three feature cards, each a tinted stage holding a small app mock (after Waymark's How it works) */
.fu-how { border-block-start: 0; }
.fu-how__head { max-inline-size: 42rem; margin: 0 auto var(--fu-space-7); text-align: center; }
.fu-how__head h2 { margin: var(--fu-space-2) 0 var(--fu-space-4); font-size: clamp(2rem, 1.2rem + 3vw, 3rem); line-height: 1.05; letter-spacing: -0.035em; }
.fu-how__head > p:last-child { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--fu-ink-muted); text-wrap: pretty; }
.fu-how__label { margin: 0; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--fu-ink-muted); }
.fu-how__grid { display: grid; gap: var(--fu-space-6) var(--fu-space-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .fu-how__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fu-how__item { margin: 0; list-style: none; }
.fu-how__item > h3 { margin: var(--fu-space-1) 0 var(--fu-space-2); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
.fu-how__item > p:last-child { margin: 0; color: var(--fu-ink-muted); line-height: 1.6; }
.fu-how__stage { position: relative; display: grid; place-items: center; min-block-size: 25.5rem; margin-block-end: var(--fu-space-4); padding: var(--fu-space-6) var(--fu-space-5); border-radius: 1.25rem; overflow: hidden; }
.fu-how__stage--rose, .fu-gallery-head__stage, details.fu-gallery-try { background: radial-gradient(60% 50% at 50% 100%, #f9c7dc, transparent 70%), linear-gradient(#fdf0f5, #fbe3ed); }
.fu-how__stage--amber { background: radial-gradient(70% 60% at 0% 100%, #f6c98e, transparent 70%), radial-gradient(60% 50% at 100% 100%, #f3b878, transparent 70%), linear-gradient(#fdf5e6, #fbecd2); }
.fu-how__stage--lilac { background: radial-gradient(80% 70% at 100% 0%, #c9b8f5, transparent 65%), radial-gradient(70% 60% at 0% 100%, #d6c9fa, transparent 70%), linear-gradient(#f4f0fd, #ece6fc); }

/* The mock card: a small slice of the app, in the app's own type and tokens */
.fu-mock { inline-size: min(100%, 21rem); background: var(--fu-surface); border: 1px solid rgb(10 10 10 / 0.06); border-radius: 1rem; box-shadow: 0 1px 2px rgb(10 10 10 / 0.04), 0 18px 40px rgb(10 10 10 / 0.10); font-size: 0.875rem; text-align: start; overflow: hidden; }
.fu-mock .fu-icon { inline-size: 1rem; block-size: 1rem; }
.fu-mock__head { display: flex; align-items: center; gap: var(--fu-space-3); padding: var(--fu-space-3) var(--fu-space-4); border-block-end: 1px solid var(--fu-rule); }
.fu-mock__icon { display: grid; place-items: center; flex: none; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--fu-rule); border-radius: 50%; color: var(--fu-ink); }
.fu-mock__title { display: grid; flex: 1; min-inline-size: 0; line-height: 1.35; }
.fu-mock__title b { font-weight: 600; }
.fu-mock__title span { color: var(--fu-ink-muted); font-size: var(--fu-text-meta); }
.fu-mock__pill { display: inline-flex; align-items: center; gap: 0.375rem; flex: none; padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--fu-pen-tint); border: 1px solid color-mix(in srgb, var(--fu-pen) 25%, white); color: var(--fu-pen-hover); font-size: var(--fu-text-meta); font-weight: 600; white-space: nowrap; }
.fu-mock__pill i, .fu-mock__foot i { inline-size: 0.4375rem; block-size: 0.4375rem; border-radius: 50%; background: var(--fu-pen); }   /* static: the mock shows sample data, not a live feed */
.fu-mock__pill--ok { background: #e8f6ee; border-color: #bfe3cf; color: #1d6b43; }
.fu-mock__body { margin: var(--fu-space-3); padding: var(--fu-space-3); background: var(--fu-surface-sunk); border: 1px solid var(--fu-rule); border-radius: 0.75rem; }
.fu-mock__label { display: flex; justify-content: space-between; margin: 0 0 var(--fu-space-2); padding-block-end: var(--fu-space-2); border-block-end: 1px solid var(--fu-rule); color: var(--fu-ink-muted); font-size: var(--fu-text-meta); }
.fu-mock__code { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8125rem; line-height: 1.7; overflow-wrap: anywhere; }
.fu-mock__code b { color: var(--fu-pen); font-weight: 600; }
.fu-mock__foot { display: flex; align-items: center; gap: var(--fu-space-2); margin: 0; padding: var(--fu-space-3) var(--fu-space-4); border-block-start: 1px solid var(--fu-rule); color: var(--fu-ink-muted); font-size: var(--fu-text-meta); }
.fu-mock__foot .fu-num { margin-inline-start: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.fu-mock__body + .fu-mock__foot { margin: 0 var(--fu-space-3) var(--fu-space-3); border: 1px solid color-mix(in srgb, var(--fu-pen) 22%, white); border-radius: 0.75rem; background: var(--fu-pen-tint); color: var(--fu-ink); }
.fu-mock__body + .fu-mock__foot .fu-icon { color: var(--fu-pen); }
.fu-mock__rows { margin: var(--fu-space-3); padding: 0; border: 1px solid var(--fu-rule); border-radius: 0.75rem; list-style: none; }
.fu-mock__rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--fu-space-3); margin: 0; padding: var(--fu-space-3); list-style: none; }
.fu-mock__rows li + li { border-block-start: 1px solid var(--fu-rule); }
.fu-mock__rows li > span:nth-child(2) { display: grid; line-height: 1.35; }
.fu-mock__rows li > span:nth-child(2) b { font-weight: 600; }
.fu-mock__rows li > span:nth-child(2) span { color: var(--fu-ink-muted); font-size: var(--fu-text-meta); }
.fu-mock__rows .fu-num { color: var(--fu-ink-muted); font-size: var(--fu-text-meta); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.fu-mock__dot { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--fu-pen-tint); color: var(--fu-pen); }
.fu-mock__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--fu-space-2); margin: 0; padding: var(--fu-space-4) var(--fu-space-4) var(--fu-space-3); }
.fu-mock__big b { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.fu-mock__big > span:not(.fu-mock__pill) { color: var(--fu-ink-muted); }
.fu-mock__big .fu-mock__pill { margin-inline-start: auto; align-self: center; }
.fu-mock__ticks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fu-space-2); margin: 0 var(--fu-space-4) var(--fu-space-4); padding: var(--fu-space-3) 0 0; border-block-start: 1px solid var(--fu-rule); list-style: none; }
.fu-mock__ticks li { display: flex; align-items: center; gap: var(--fu-space-2); margin: 0; list-style: none; }
.fu-mock__ticks .fu-icon { color: var(--fu-pen); }
.fu-mock__split { display: grid; grid-template-columns: 1fr 1fr; border-block-start: 1px solid var(--fu-rule); }
.fu-mock__split > span { display: grid; gap: 0.125rem; padding: var(--fu-space-3) var(--fu-space-4); }
.fu-mock__split > span + span { border-inline-start: 1px solid var(--fu-rule); }
.fu-mock__split > span > span { color: var(--fu-ink-muted); font-size: var(--fu-text-meta); }
.fu-mock__split b { font-weight: 600; }
/* The stage lifts its card a touch on hover, like picking it up off the table. */
.fu-how__stage .fu-mock { transition: transform 300ms var(--fu-ease-out), box-shadow 300ms var(--fu-ease-out); }
.fu-how__item:hover .fu-mock { transform: translateY(-4px); box-shadow: 0 1px 2px rgb(10 10 10 / 0.04), 0 26px 50px rgb(10 10 10 / 0.14); }
@media (prefers-reduced-motion: reduce) { .fu-how__item:hover .fu-mock { transform: none; } }

/* The sample invitation in a drawn iPhone 18 Pro Max (per 2026 leaks: Pro Max 19.5:9 screen, thin even
   bezels, a Dynamic Island about 35% narrower than the 17 Pro's). Proportions are relative to the width:
   rim 3px of silver, bezel ~2%, corner radius ~12.5%, island ~17% wide. Buttons: Action and volume on the
   left, side button and the flush Camera Control on the right. */
.fu-iphone { --w: min(100%, 20rem); position: relative; inline-size: var(--w) !important; max-inline-size: none !important; aspect-ratio: 9 / 19.5 !important; margin-block-end: var(--fu-space-2);
  padding: calc(3px + var(--fu-bezel, 0.4rem)); border: 0 !important; border-radius: 14% / 6.5%; overflow: visible !important;
  background: linear-gradient(135deg, #d9d9de 0%, #8e8e94 22%, #e8e8ec 48%, #7d7d83 74%, #c9c9ce 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5), 0 30px 70px rgb(10 10 10 / 0.22), 0 6px 14px rgb(10 10 10 / 0.12) !important; }
.fu-iphone :is(iframe, .fu-iphone__screen) { position: relative; z-index: 1; display: block; inline-size: 100%; block-size: 100%; border-radius: 12% / 5.5%; background: #fff; box-shadow: 0 0 0 var(--fu-bezel, 0.4rem) #050505; }
.fu-iphone__island { position: absolute; z-index: 2; inset-block-start: calc(3px + var(--fu-bezel, 0.4rem) + 0.55rem); inset-inline-start: 50%; translate: -50% 0;
  inline-size: 17%; block-size: auto; aspect-ratio: 2.3; border-radius: 999px; background: #000; box-shadow: inset 0.55rem 0 0 -0.32rem #182131; pointer-events: none; }
/* Left: Action button, volume up, volume down (one element and two copies). Right: side button and Camera Control. */
.fu-iphone::before, .fu-iphone::after { content: ""; position: absolute; inline-size: 3px; border-radius: 2px; background: linear-gradient(90deg, #6f6f75, #b9b9be); pointer-events: none; }
.fu-iphone::before { inset-inline-start: -3px; inset-block-start: 18%; block-size: 31%; background: linear-gradient(transparent 16%, transparent 39%, #9d9da2 39% 65%, transparent 65% 74.5%, #9d9da2 74.5%), linear-gradient(90deg, #6f6f75, #b9b9be) 0 0 / 100% 16% no-repeat; }   /* Action, volume up, volume down */
.fu-iphone::after { inset-inline-end: -3px; inset-block-start: 26%; block-size: 45%; background: linear-gradient(#a5a5aa 0 24%, transparent 24% 80%, #8a8a90 80%); }   /* side button, Camera Control */
@media (min-width: 900px) { [data-tabs-wide] .fu-iphone { --w: 18.5rem; } }

/* "Tiga langkah, langsung sebar" (after finzo's feature row): centred head with an italic serif word,
   then three columns each opening with a dashed rule, an outlined icon tile, a title and one line. */
.fu-flow__head { max-inline-size: 40rem; margin: 0 auto var(--fu-space-7); text-align: center; }
.fu-flow__head h2 { margin: 0 0 var(--fu-space-3); font-weight: 400; font-size: clamp(2rem, 1.2rem + 3vw, 3rem); line-height: 1.1; letter-spacing: -0.035em; color: #2b2626; }
.fu-flow__head h2 em { font-family: "Instrument Serif", var(--fu-font-name); font-style: italic; letter-spacing: -0.01em; color: var(--fu-pen); }
.fu-flow__head p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--fu-ink-muted); }
.fu-flow__list { display: grid; gap: var(--fu-space-6); margin: 0; padding: 0; list-style: none; counter-reset: fu-step; }
@media (min-width: 768px) { .fu-flow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fu-space-5); } }
.fu-flow__list li { margin: 0; padding: var(--fu-space-1) 0 var(--fu-space-1) var(--fu-space-6); border-inline-start: 1px dashed var(--fu-rule-strong); list-style: none; counter-increment: fu-step; }
/* Same velvet gradient as the hero's "Buat undangan" button; the glyph stays white on it. */
.fu-flow__icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; margin-block-end: var(--fu-space-5); border-radius: 0.75rem; background: linear-gradient(var(--fu-pen), color-mix(in srgb, var(--fu-pen) 72%, white)); box-shadow: 0 6px 16px rgb(190 44 107 / 0.25); }
.fu-flow__icon svg { inline-size: 1.5rem; block-size: 1.5rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fu-flow__list h3::before { content: counter(fu-step) ". "; color: var(--fu-pen); font-weight: 700; font-variant-numeric: tabular-nums; }
.fu-flow__list h3 { margin: 0 0 var(--fu-space-2); font-size: 1.375rem; font-weight: 400; letter-spacing: -0.02em; color: #2b2626; }
.fu-flow__list p { margin: 0; color: var(--fu-ink-muted); line-height: 1.6; }
.fu-flow__more { margin: var(--fu-space-6) 0 0; text-align: center; }
@media (forced-colors: active) { .fu-flow__icon { border: 1px solid CanvasText; } .fu-flow__icon svg { stroke: CanvasText; } }

/* Pale pink band behind the homepage wall and FAQ (the light counterpart of the pink primary). */
:root { --fu-band: #fdf3f7; --fu-band-rule: #efd3df; interpolate-size: allow-keywords; }

/* Homepage FAQ: a plain accordion on the pink band. Heading, hairline rows, question left, a pink plus that becomes a minus. */
.fu-faq { position: relative; margin-block: var(--fu-space-7) 0; padding-block: var(--fu-space-7) calc(var(--fu-space-7) * 1.5); color: #2b2626; isolation: isolate; }
.fu-faq::before { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline: calc(50% - 50vw); background: var(--fu-band); }
.fu-faq h2 { max-inline-size: 52rem; margin: 0 auto var(--fu-space-6); font-weight: 500; font-size: clamp(2rem, 1.2rem + 3vw, 3rem); letter-spacing: -0.035em; color: #2b2626; }
.fu-faq__list { max-inline-size: 52rem; margin-inline: auto; border-block-start: 1px solid var(--fu-band-rule); }
.fu-faq details.fu-faq__item { margin: 0; padding: 0; border: 0; border-block-end: 1px solid var(--fu-band-rule); }
.fu-faq details.fu-faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--fu-space-4); margin: 0; padding-block: var(--fu-space-5); list-style: none; cursor: pointer; color: #2b2626; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); font-weight: 500; letter-spacing: -0.01em; }
.fu-faq details.fu-faq__item > summary::-webkit-details-marker { display: none; }
.fu-faq details.fu-faq__item > summary::after { content: none; }
.fu-faq details.fu-faq__item > summary:focus-visible { outline: 2px solid var(--fu-pen); outline-offset: 4px; }
.fu-faq__mark { position: relative; flex: none; inline-size: 1.125rem; block-size: 1.125rem; color: var(--fu-pen); }
.fu-faq__mark::before, .fu-faq__mark::after { content: ""; position: absolute; inset: 50% 0 auto; block-size: 2px; translate: 0 -50%; background: currentColor; transition: rotate 250ms var(--fu-ease-out); }
.fu-faq__mark::after { rotate: 90deg; }
.fu-faq details[open] .fu-faq__mark::after { rotate: 0deg; }
.fu-faq details.fu-faq__item > p { margin: 0; padding-block-end: var(--fu-space-5); max-inline-size: 40rem; color: #5f5a5c; line-height: 1.6; }
/* Open and close by sliding the answer's height (interpolate-size + ::details-content, Chrome 131+, Safari 18.4+);
   other browsers simply toggle, which is the native behaviour. */
.fu-faq details.fu-faq__item::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 320ms var(--fu-ease-out), opacity 320ms var(--fu-ease-out), content-visibility 320ms allow-discrete; }
.fu-faq details.fu-faq__item[open]::details-content { block-size: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fu-faq__mark::before, .fu-faq__mark::after, .fu-faq details.fu-faq__item::details-content { transition: none; } }

/* "Template dari komunitas" wall (after awsmd.com's app-screens section): a dark band, tall rounded
   template screens in rows of five, and a phone held in the middle column that stays put while the rows
   scroll under it, its screen switching to the middle template of the row passing behind (wall.js). */
.fu-wall { position: relative; margin-block: var(--fu-space-7); padding-block: var(--fu-space-7) calc(var(--fu-space-7) * 1.5); color: #2b2626; isolation: isolate; }
.fu-wall::before { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline: calc(50% - 50vw); background: var(--fu-band); }
.fu-wall__head { display: grid; gap: var(--fu-space-3); max-inline-size: 40rem; margin: 0 auto var(--fu-space-7); text-align: center; justify-items: center; }
.fu-wall__head h2 { margin: 0; font-weight: 400; font-size: clamp(2rem, 1.2rem + 3vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; color: #2b2626; }
.fu-wall__head p { margin: 0; color: #5f5a5c; font-size: 1.0625rem; line-height: 1.6; }
.fu-wall__head .fu-how__label { color: #5f5a5c; }
.fu-wall .fu-landing-more { display: inline-flex; gap: var(--fu-space-2); color: var(--fu-pen); }
.fu-wall .fu-landing-more:hover { color: var(--fu-pen-hover); }
.fu-wall__stage { position: relative; inline-size: 100vw; margin-inline: calc(50% - 50vw); overflow-x: clip; }
.fu-wall__rows { display: grid; gap: var(--gap); justify-content: center; }
.fu-wall__row { display: grid; grid-template-columns: repeat(5, var(--tile)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.fu-wall__cell { margin: 0; list-style: none; }
.fu-wall__tile { position: relative; display: block; aspect-ratio: 9 / 19; border-radius: 15% / 7%; overflow: hidden; background: #f6dfe8; box-shadow: 0 10px 30px rgb(190 44 107 / 0.10); }
.fu-wall__tile img, .fu-iphone__screen img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
.fu-wall__tile img { transition: transform 500ms var(--fu-ease-out), opacity 300ms; }
.fu-wall__blank { display: grid; place-items: center; inline-size: 100%; block-size: 100%; padding: var(--fu-space-3); background: #f6dfe8; color: var(--fu-pen-hover); font-weight: 600; text-align: center; }
.fu-wall__name { position: absolute; inset: auto 0.75rem 0.75rem; padding: 0.375rem 0.75rem; border-radius: 999px; background: rgb(12 12 13 / 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: var(--fu-text-meta); font-weight: 600; text-align: center; opacity: 0; translate: 0 0.5rem; transition: opacity 200ms var(--fu-ease-out), translate 200ms var(--fu-ease-out); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-wall__tile:is(:hover, :focus-visible) img { transform: scale(1.04); }
.fu-wall__tile:is(:hover, :focus-visible) .fu-wall__name { opacity: 1; translate: 0 0; }
.fu-wall__tile:focus-visible { outline: 2px solid var(--fu-pen); outline-offset: 3px; }
@media (hover: none) { .fu-wall__name { opacity: 1; translate: 0 0; } }
.fu-iphone__screen { position: relative; overflow: hidden; }
.fu-iphone__screen > * { position: absolute; inset: 0; opacity: 0; transition: opacity 450ms var(--fu-ease-out); }
.fu-iphone__screen > .is-on { opacity: 1; }
@media (max-width: 767.98px) {
  .fu-showcase { --tile: calc((100vw - 2rem - 2 * var(--gap)) / 3); }
  .fu-wall__row { grid-template-columns: repeat(3, var(--tile)); }
  .fu-wall__cell:first-child, .fu-wall__cell:last-child { display: none; }
  .fu-wall__name { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fu-wall__tile img, .fu-iphone__screen > * { transition: none; } }

/* ---------- Fields as a grouped list (2026-10-21, after iOS Settings; replaces the filled bars) ----------
   Each field is a row: a pink icon tile, the label, then the value; consecutive rows join into one grey
   card with hairlines between them. Long text (textarea) and narrow screens stack the value under the label.
   Markup: editor/_field.html and a few hand-written forms wrap label + control (+ hint, error) in .fu-row. */
.fu-row { display: grid; grid-template-columns: 1.75rem minmax(0, 10rem) minmax(0, 1fr); align-items: center; column-gap: var(--fu-space-3);
  margin: 0; padding: 0.375rem var(--fu-space-4); background: var(--fu-surface-sunk); position: relative; }
.fu-row::before { content: ""; grid-column: 1; grid-row: 1; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 0.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") center / 1rem no-repeat; background-color: var(--fu-pen); transition: background-color 160ms var(--fu-ease-out); }
/* The couple's nickname rows: a woman for the bride, a man for the groom (hero bar and the editor). */
.fu-row:is([data-f="bride.nickname"], [data-f="try.bride"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3Cpath d='M7 13.5C5.5 8 8 3.5 12 3.5s6.5 4.5 5 10'/%3E%3Cpath d='M5 20.5c0-3.6 3.1-6 7-6s7 2.4 7 6'/%3E%3C/svg%3E"); }
.fu-row:is([data-f="groom.nickname"], [data-f="try.groom"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 20.5c0-3.6 3.1-6 7-6s7 2.4 7 6'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$="full_name"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$="child_order"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.5'/%3E%3Cpath d='M2.5 19.5c1-3.5 3.5-5 6.5-5s5.5 1.5 6.5 5'/%3E%3Cpath d='M15.5 5.2a3.5 3.5 0 0 1 0 6.6M17.5 14.6c2 .6 3.4 2.2 4 4.9'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$="father_name"], [data-f$="mother_name"], [data-f$="guardian"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.5'/%3E%3Cpath d='M2.5 19.5c1-3.5 3.5-5 6.5-5s5.5 1.5 6.5 5'/%3E%3Cpath d='M15.5 5.2a3.5 3.5 0 0 1 0 6.6M17.5 14.6c2 .6 3.4 2.2 4 4.9'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$="instagram"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.2 6.8h.01'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$="photo_url"], [data-f$="cover_image_url"], [data-f="gallery-paste"], [data-f$="foto"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M20.5 16l-5-5-8.5 8.5'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$=".title"], [data-f="tpl.title"], [data-f="tpl.label"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.3V4.5a1 1 0 0 1 1-1h7.8l8.2 8.2a1.5 1.5 0 0 1 0 2.1l-6.4 6.4a1.5 1.5 0 0 1-2.1 0z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$=".date"], [data-f$="].date"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$="time_start"], [data-f$="time_end"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$="timezone"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.5 2.6 3.7 5.4 3.7 8.5s-1.2 5.9-3.7 8.5c-2.5-2.6-3.7-5.4-3.7-8.5S9.5 6.1 12 3.5z'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$="venue_name"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11.2a6.5 6.5 0 0 1 13 0C18.5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.8' r='2.3'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$=".address"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5l-5.5 2v13l5.5-2 6 2 5.5-2v-13l-5.5 2z'/%3E%3Cpath d='M9 4.5v13M15 6.5v13'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$="maps_url"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$=".lat"], [data-f$=".lng"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$="dress_code"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 3.5L3.5 6.5l2 4 2-1v11h9v-11l2 1 2-4-5-3a3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$=".note"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3.5h9l4 4v13h-13z'/%3E%3Cpath d='M14.5 3.5v4h4M8.5 12h7M8.5 15.5h7'/%3E%3C/svg%3E"); }
.fu-row:is([data-f="hashtag"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3.5l-2 17M16.5 3.5l-2 17M4.5 9h16M3.5 15h16'/%3E%3C/svg%3E"); }
.fu-row:is([data-f="quote"], [data-f="quote_source"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 8.5H6a1.5 1.5 0 0 0-1.5 1.5v3A1.5 1.5 0 0 0 6 14.5h2.5v1a3 3 0 0 1-3 3M19.5 8.5H16a1.5 1.5 0 0 0-1.5 1.5v3a1.5 1.5 0 0 0 1.5 1.5h2.5v1a3 3 0 0 1-3 3'/%3E%3C/svg%3E"); }
.fu-row:is([data-f="opening_text"], [data-f="closing_text"], [data-f$="].text"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 5.5h15a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-9l-5 3.5v-3.5h-1a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.fu-row:is([data-f="guest_fallback_text"], [data-f$="account_holder"], [data-f="guest.name"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
.fu-row:is([data-f="video_url"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='3'/%3E%3Cpath d='M10.5 9.5v5l4-2.5z'/%3E%3C/svg%3E"); }
.fu-row:is([data-f="music_id"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V5.5l10.5-2v12'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='17' cy='15.5' r='2.5'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$="bank_name"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5L12 4l8.5 5.5M5 10v7.5M9.5 10v7.5M14.5 10v7.5M19 10v7.5M3.5 20h17'/%3E%3C/svg%3E"); }
.fu-row:is([data-f$="account_number"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h18M6.5 15h4'/%3E%3C/svg%3E"); }
.fu-row:is([data-f="gift_address"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='11.5' rx='1'/%3E%3Cpath d='M3 9h18M12 9v11.5M12 9C10.5 5.5 6.5 5 6.5 7.3S10 9 12 9zM12 9c1.5-3.5 5.5-4 5.5-1.7S14 9 12 9z'/%3E%3C/svg%3E"); }
.fu-row:is([data-f="guest.quota"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='3.5'/%3E%3Cpath d='M5.5 19.5c1-3.3 3.6-5 6.5-5s5.5 1.7 6.5 5'/%3E%3C/svg%3E"); }
.fu-row:is([data-f="guest.phone"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19.5l1.2-3.6A8 8 0 1 1 9 18.3z'/%3E%3C/svg%3E"); }
.fu-row:is([data-f="tpl.event"], [data-f="tpl.type"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h7l4 4v13h-11z'/%3E%3Cpath d='M13.5 3.5v4h4'/%3E%3C/svg%3E"); }
.fu-row:is([data-f="tpl.default"])::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); }
/* Join consecutive rows into one card */
:not(.fu-row) + .fu-row, .fu-row:first-child { border-start-start-radius: 1rem; border-start-end-radius: 1rem; margin-block-start: var(--fu-space-2); }
.fu-row:not(:has(+ .fu-row)) { border-end-start-radius: 1rem; border-end-end-radius: 1rem; margin-block-end: var(--fu-space-4); }
.fu-row + .fu-row { border-block-start: 1px solid var(--fu-rule); }
.fu-row > label:first-of-type, .fu-row > .fu-row__l { grid-column: 2; grid-row: 1; margin: 0; font-size: 0.9375rem; font-weight: 500; color: var(--fu-ink); }
.fu-row .fu-req { font-weight: 400; color: var(--fu-ink-muted); }
/* The value: borderless on the row, right-aligned like iOS while it shares the line with its label */
.fu-row > :is(input, select, textarea), .fu-row > label > :is(input, select) { grid-column: 3; grid-row: 1; inline-size: 100%; min-block-size: 2.75rem; margin: 0;
  padding: 0.5rem 0; border: 0 !important; border-radius: 0; background-color: transparent !important; box-shadow: none !important; color: var(--fu-ink); text-align: end; }
.fu-row > select { padding-inline-end: 1.75rem; text-align-last: end; }
label.fu-row > input { grid-column: 3; grid-row: 1; }
.fu-row :is(input, select, textarea)::placeholder { color: #8f8f8f; opacity: 1; }
.fu-row > :is(.fu-field-hint, .fu-field-error) { grid-column: 2 / -1; margin: 0 0 0.375rem; }
/* Long text: label line, then a white box under it */
.fu-row--stack > textarea { grid-column: 1 / -1; grid-row: auto; min-block-size: 6rem; margin-block: 0.25rem 0.5rem; padding: 0.625rem 0.75rem;
  border: 1px solid var(--fu-rule) !important; border-radius: 0.75rem; background-color: var(--fu-surface) !important; text-align: start; }
.fu-row--stack > :is(.fu-field-hint, .fu-field-error) { grid-column: 1 / -1; }
/* Focus: the row lifts to white with a pink ring and a darker tile */
.fu-row:focus-within { z-index: 1; background: var(--fu-surface); box-shadow: inset 0 0 0 2px var(--fu-pen); border-radius: 0.75rem; }
.fu-row:focus-within::before { background-color: var(--fu-pen-hover); }
.fu-row:focus-within + .fu-row { border-block-start-color: transparent; }
.fu-row:has(:focus-visible) > :is(input, select, textarea) { outline: none; }
/* Needs fixing */
.fu-row:has([aria-invalid="true"]) { background: var(--fu-error-tint); }
.fu-row:has([aria-invalid="true"])::before { background-color: var(--fu-error); }
.fu-row:has([aria-invalid="true"]) > :is(input, select) { color: var(--fu-error); }
/* "Tersimpan" in a field row: the label shrinks to its text while it flashes (its grid cell keeps the width,
   so nothing moves) and the pill sits right after the word, on the label's own line, clear of the value and
   any textarea below; the icon tile turns into a tick meanwhile. */
.fu-row > label.fu-saved-flash { justify-self: start; }
.fu-row .fu-saved-flash::after { inset-inline: calc(100% + 0.5rem) auto; }
.fu-row:has(> .fu-saved-flash)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  animation: fu-tile-tick 0.4s var(--fu-ease-out); }
@keyframes fu-tile-tick { 0% { scale: 0.8; } 60% { scale: 1.08; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .fu-row:has(> .fu-saved-flash)::before { animation: none; } }
/* Narrow screens and narrow editor columns: the value drops under its label */
.fu-editor .fu-block form, .fu-guest-add, .fu-guest__edit form, .fu-page form { container-type: inline-size; }
@container (max-width: 30rem) {
  .fu-row { grid-template-columns: 1.75rem minmax(0, 1fr); padding-block: 0.625rem 0.25rem; }
  .fu-row > label:first-of-type, .fu-row > .fu-row__l { grid-column: 2; }
  .fu-row > :is(input, select), label.fu-row > input { grid-column: 1 / -1; grid-row: 2; padding-inline-start: calc(1.75rem + var(--fu-space-3)); text-align: start; text-align-last: start; }
  .fu-row > :is(.fu-field-hint, .fu-field-error) { grid-column: 1 / -1; padding-inline-start: calc(1.75rem + var(--fu-space-3)); }
}
/* Paired fields (start/end time, lat/lng) join into one card instead of two half-width ones. */
.fu-grid-2:has(.fu-row) { display: block; }
.fu-grid-2:has(.fu-row) > div { display: contents; }
.fu-grid-2 > div:not(:last-child) > .fu-row { border-end-start-radius: 0; border-end-end-radius: 0; margin-block-end: 0; }
.fu-grid-2 > div + div > .fu-row { border-start-start-radius: 0; border-start-end-radius: 0; margin-block-start: 0; border-block-start: 1px solid var(--fu-rule); }
/* Guest forms: the three fields stack as one card, the action follows */
.fu-guest-add .fu-guest__fields, .fu-guest__edit .fu-guest__fields { display: block; }
.fu-guest__fields .fu-row input { margin: 0; }
@media (forced-colors: active) { .fu-row { border: 1px solid CanvasText; } .fu-row::before { forced-color-adjust: none; } }
@media (prefers-reduced-motion: reduce) { .fu-row::before { transition: none; } }

/* ---------- Type scale (2026-10-23, matched to freekasir.com; Tailwind's steps) ----------
   12/16 · 14/20 · 16/24 (prose 16/26) · 18/28 · 24/32 · 30/36 · 36/40 · 48 · 60, headings tracked -0.025em.
   Weights stay this app's own; only sizes, leading and tracking move. */
:root {
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; --fs-4xl: 2.25rem; --fs-5xl: 3rem; --fs-6xl: 3.75rem;
  --track-tight: -0.025em;
}
/* Nav and footer: small UI text */
.fu-topbar nav a, .fu-topbar nav summary { font-size: var(--fs-sm); line-height: 1.25rem; }
.fu-wordmark { font-size: var(--fs-lg) !important; line-height: 1.75rem; }
.fu-footer__brand p, .fu-footer .fu-footer__nav a, .fu-footer__base p { font-size: var(--fs-sm); line-height: 1.625; }
.fu-footer__nav h2 { font-size: var(--fs-sm); line-height: 1.25rem; letter-spacing: 0; }
/* Hero: 36 on phones, 48 on tablets, 60 on desktop */
.fu-page .fu-hero h1 { font-size: var(--fs-4xl); line-height: 1.05; letter-spacing: var(--track-tight); }
@media (min-width: 768px) { .fu-page .fu-hero h1 { font-size: var(--fs-5xl); } }
@media (min-width: 1024px) { .fu-page .fu-hero h1 { font-size: var(--fs-6xl); } }
.fu-hero__text p:not(.fu-note-pill) { font-size: var(--fs-base); line-height: 1.625; }
@media (min-width: 768px) { .fu-hero__text p:not(.fu-note-pill) { font-size: var(--fs-lg); } }
.fu-note-pill__in { font-size: var(--fs-sm); line-height: 1.25rem; }
/* Section headings: 30 on phones, 36 from tablets */
:is(.fu-how__head, .fu-wall__head, .fu-flow__head) h2, .fu-faq h2, .fu-landing-block h2, .fu-closing h2 { font-size: var(--fs-3xl); line-height: 2.25rem; letter-spacing: var(--track-tight); }
@media (min-width: 768px) { :is(.fu-how__head, .fu-wall__head, .fu-flow__head) h2, .fu-faq h2, .fu-landing-block h2, .fu-closing h2 { font-size: var(--fs-4xl); line-height: 2.5rem; } }
/* Section ledes: 16/26 on phones, 18/28 from tablets */
.fu-how__head > p:last-child, .fu-wall__head > p:not(.fu-how__label), .fu-flow__head p { font-size: var(--fs-base); line-height: 1.625; }
@media (min-width: 768px) { .fu-how__head > p:last-child, .fu-wall__head > p:not(.fu-how__label), .fu-flow__head p { font-size: var(--fs-lg); line-height: 1.75rem; } }
.fu-how__label, .fu-wall__head .fu-how__label { font-size: var(--fs-sm); line-height: 1.25rem; letter-spacing: 0; }
/* Card titles 18/28, card text 16/26 */
.fu-how__item > h3, .fu-flow__list h3 { font-size: var(--fs-lg); line-height: 1.75rem; letter-spacing: 0; }
.fu-how__item > p:last-child, .fu-flow__list p { font-size: var(--fs-base); line-height: 1.625; }
/* FAQ: questions 16/24, answers 14/22.75 */
.fu-faq details.fu-faq__item > summary { font-size: var(--fs-base); line-height: 1.5rem; font-weight: 600; letter-spacing: 0; }
.fu-faq details.fu-faq__item > p { font-size: var(--fs-sm); line-height: 1.625; }
/* App pages: the page title is 30/36, block headings 24/32 */
.fu-page h1 { font-size: var(--fs-3xl); line-height: 2.25rem; letter-spacing: var(--track-tight); }
.fu-block > h2 { font-size: var(--fs-2xl); line-height: 2rem; letter-spacing: var(--track-tight); }

/* "Coba nama" in the hero: the editor's grouped rows, laid out as one search-style bar.
   Phones: two stacked rows and a full-width button. Wider: both names side by side in one grey bar, label over
   value, the button inside the bar on the right. Names stay in the couple's serif. */
.fu-try__bar { display: grid; gap: 0; margin-block: var(--fu-space-2); }
.fu-try .fu-row { margin: 0; border-radius: 0; }
.fu-try .fu-row:first-child { border-start-start-radius: 1rem; border-start-end-radius: 1rem; margin: 0; }
.fu-try .fu-row:nth-child(2) { border-end-start-radius: 1rem; border-end-end-radius: 1rem; margin: 0; }
.fu-try .fu-row { grid-template-columns: 1.75rem minmax(0, 1fr); padding-block: 0.5rem; row-gap: 0; }
.fu-try input::placeholder { color: var(--fu-ink-muted); opacity: 1; font-family: var(--fu-font); font-size: var(--fu-text-body); }
.fu-try .fu-row > .fu-row__l { grid-column: 2; grid-row: 1; font-size: var(--fu-text-meta); line-height: 1.25rem; font-weight: 600; color: var(--fu-ink-muted); }
.fu-try .fu-row::before { grid-row: 1 / span 2; align-self: center; }
.fu-try label.fu-row > input { grid-column: 2; grid-row: 2; min-block-size: 0; padding: 0.125rem 0 0; text-align: start; font-family: var(--fu-font-name); font-size: var(--fs-lg); line-height: 1.75rem; color: var(--fu-ink); }
.fu-try .fu-try__bar > .fu-try__go { display: inline-flex; align-items: center; justify-content: center; gap: var(--fu-space-2); justify-self: end; inline-size: auto; min-block-size: 2.75rem; margin: var(--fu-space-3) 0 0; padding: 0 var(--fu-space-4);
  background: var(--fu-surface); border: 1px solid var(--fu-rule); border-radius: 999px; box-shadow: 0 1px 2px rgb(10 10 10 / 0.06); color: var(--fu-pen); font-weight: 600; }
/* Quiet on purpose: "Buat undangan" stays the hero's one filled button. */
.fu-try .fu-try__bar > .fu-try__go:hover { background: var(--fu-pen); border-color: var(--fu-pen); color: #fff; }
.fu-try .fu-try__bar > .fu-try__go:focus-visible { outline: 2px solid var(--fu-pen); outline-offset: 2px; }
.fu-try .fu-try__go .fu-icon { transition: transform 200ms var(--fu-ease-out); }
.fu-try .fu-try__go:hover .fu-icon { transform: translateX(3px); }
@media (min-width: 600px) {
  .fu-try__bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; padding: 0.375rem; background: var(--fu-surface-sunk); border-radius: 1.25rem; }
  .fu-try .fu-row, .fu-try .fu-row:first-child, .fu-try .fu-row:nth-child(2) { background: transparent; border: 0; border-radius: 0.875rem; }
  .fu-try .fu-row + .fu-row { box-shadow: inset 1px 0 0 var(--fu-rule); }
  .fu-try .fu-row:focus-within { background: var(--fu-surface); box-shadow: inset 0 0 0 2px var(--fu-pen); }
  /* In the bar: a round arrow button, like a search field's go button. */
  .fu-try .fu-try__bar > .fu-try__go { inline-size: 2.75rem; block-size: 2.75rem; margin: 0 0.125rem 0 var(--fu-space-2); padding: 0; }
  .fu-try__go-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .fu-try .fu-try__go .fu-icon { transition: none; } }

/* Hero form: no white card; the bar sits straight on the hero wash, frosted, with the gallery link in its note. */
.fu-hero .fu-try { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
@media (min-width: 900px) { .fu-hero .fu-try__title, .fu-hero .fu-try > .fu-meta { text-align: center; } }
.fu-hero .fu-try__bar { background: rgb(255 255 255 / 0.72); border: 1px solid var(--fu-rule); box-shadow: 0 10px 30px rgb(190 44 107 / 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 599.98px) {
  .fu-hero .fu-try__bar { padding: 0; border: 0; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fu-hero .fu-try .fu-row { background: rgb(255 255 255 / 0.8); border: 1px solid var(--fu-rule); }
  .fu-hero .fu-try .fu-row:first-child { border-radius: 1rem 1rem 0 0; }
  .fu-hero .fu-try .fu-row:nth-child(2) { border-radius: 0 0 1rem 1rem; border-block-start: 0; }
}
.fu-try__more { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; white-space: nowrap; }
.fu-try__more .fu-icon { inline-size: 1rem; block-size: 1rem; }

/* ---------- Stage: one phone for the demo and the template wall (wall.js sets .is-joined from 900px) ---------- */
.fu-showcase { --tile: clamp(7rem, 20vw, 19rem); --gap: clamp(0.5rem, 1.4vw, 1.25rem); --phone: calc(var(--tile) * 1.08); position: relative; }
.fu-showcase > .fu-hero__sample { margin-block-start: var(--fu-space-6); }
.fu-showcase__phonecol { display: none; }
.fu-showcase.is-joined .fu-showcase__phonecol { display: block; position: absolute; z-index: 3; inset-block: 0 calc(var(--fu-space-7) * 1.5); inset-inline-start: 50%; translate: -50% 0; inline-size: var(--phone); pointer-events: none; }
.fu-showcase__phone.fu-iphone { --w: 100%; position: sticky; inset-block-start: calc(50vh - var(--phone) * 19.5 / 9 / 2); margin: 0; pointer-events: auto;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5), 0 40px 90px rgb(120 30 70 / 0.24) !important; }
.fu-iphone__screen iframe { inline-size: 100%; block-size: 100%; border: 0; border-radius: 0; box-shadow: none; }
.fu-showcase__live { background: #fff; }
/* While joined: the demo's own phone keeps its space but stays invisible; the wall's middle column is the phone's lane. */
.fu-showcase.is-joined [data-tabs-wide] .fu-demo__panels { grid-template-columns: 1fr var(--phone) 1fr; }
.fu-showcase.is-joined #demo-undangan .fu-phone-frame { --w: var(--phone); visibility: hidden; }
.fu-showcase.is-joined .fu-wall__cell--mid .fu-wall__tile { visibility: hidden; }
/* The wall heading splits around the phone's lane: title on the left, note and link on the right. */
.fu-showcase.is-joined .fu-wall__head { display: grid; grid-template-columns: 1fr var(--phone) 1fr; column-gap: var(--fu-space-6); max-inline-size: none; align-items: end; justify-items: stretch; text-align: start; }
.fu-showcase.is-joined .fu-wall__head > .fu-how__label { grid-column: 1; grid-row: 1; text-align: end; }
.fu-showcase.is-joined .fu-wall__head > h2 { grid-column: 1; grid-row: 2; text-align: end; }
.fu-showcase.is-joined .fu-wall__head > p:not(.fu-how__label) { grid-column: 3; grid-row: 1 / span 2; align-self: end; }
.fu-showcase.is-joined .fu-wall__head > .fu-landing-more { grid-column: 3; grid-row: 3; justify-self: start; }
/* Footer wordmark: fades from the pink primary instead of grey. */
.fu-footer__giant { color: transparent; background: linear-gradient(to bottom, color-mix(in srgb, var(--fu-pen) 55%, var(--fu-surface-sunk)), color-mix(in srgb, var(--fu-pen) 12%, var(--fu-surface-sunk)) 85%); -webkit-background-clip: text; background-clip: text; }

/* iPhone 18 Pro Max (burgundy) from the owner's mockup, 2026-10-23: static/iphone-frame.webp is the photo with its
   screen cut out (island kept). The screen sits 60px in from every edge of the 1440x2988 image, corners r=190. */
.fu-iphone { aspect-ratio: 1440 / 2988 !important; padding: 3.85% !important; background: none !important; border-radius: 0; box-shadow: none !important; filter: drop-shadow(0 24px 40px rgb(80 20 40 / 0.22)); }   /* the shadow follows the photo's outline */
.fu-iphone::before { content: none; }
.fu-iphone::after { content: ""; position: absolute; z-index: 3; inset: 0; inline-size: auto; block-size: auto; border-radius: 0; background: url("iphone-frame.webp") center / 100% 100% no-repeat; box-shadow: none; pointer-events: none; }
.fu-iphone__island { display: none; }
.fu-iphone :is(iframe, .fu-iphone__screen) { border-radius: 15% / 7%; box-shadow: none; background: #0a101c; }
.fu-showcase__phone.fu-iphone { box-shadow: none !important; filter: drop-shadow(0 30px 50px rgb(80 20 40 / 0.26)); }

/* Gallery detail on phones: the screen already is a phone, so the preview drops the bezel and shows the cover still
   (no scroll trap, clear of the fixed action bar); "Lihat layar penuh" opens it at the guest's real width. */
.fu-stage__full { margin: var(--fu-space-1) 0 0; text-align: center; }
.fu-stage__full a { display: inline-flex; align-items: center; gap: 0.25rem; min-block-size: var(--fu-touch); font-weight: 600; }
.fu-stage__full .fu-icon { inline-size: 1rem; block-size: 1rem; }
@media (max-width: 767.98px) {
  .fu-gallery-show .fu-iphone { --w: 100%; aspect-ratio: auto !important; block-size: min(60svh, 34rem); padding: 0 !important; margin-block-end: 0; border: 0; border-radius: 1.25rem; filter: none;
    box-shadow: 0 0 0 1px var(--fu-rule), 0 10px 28px rgb(80 20 40 / 0.14) !important; }
  .fu-gallery-show .fu-iphone::before, .fu-gallery-show .fu-iphone::after { content: none; }
  .fu-gallery-show .fu-iphone iframe { border-radius: 1.25rem; pointer-events: none; }
  .fu-gallery-show .fu-stage { position: relative; }
  .fu-gallery-show .fu-stage__full a::before { content: ""; position: absolute; inset: 0; }   /* tapping the still preview opens it full screen */
}

/* ---------- Template saya (contributor list) ----------
   Groups by what the designer needs to do. Action rows read name, status, then the admin's note and the next step
   (DOM order for screen readers; grid areas put the chip on the right). Live templates are a cover grid like the
   public gallery, with a chip only when a newer version is in play. */
/* Empty "Template saya": a filled phone next to an empty slot and the HTML file waiting to be uploaded. Colours come
   from the tokens through classes, since presentation attributes cannot read custom properties. */
.fu-tpl-empty { display: grid; justify-items: center; gap: var(--fu-space-2); margin-block-start: var(--fu-space-7); padding: var(--fu-space-6) var(--fu-space-4) var(--fu-space-7);
  border: 1px dashed var(--fu-rule-strong); border-radius: var(--fu-radius); text-align: center; }
.fu-tpl-empty__art { inline-size: min(100%, 16rem); block-size: auto; margin-block-end: var(--fu-space-3); overflow: visible; }
.fu-tpl-empty h2 { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }
.fu-tpl-empty p { margin: 0; max-inline-size: 30rem; color: var(--fu-ink-muted); text-wrap: pretty; }
.fu-tpl-empty__art .a-floor { fill: var(--fu-surface-sunk); }
.fu-tpl-empty__art .a-slot { fill: var(--fu-surface); stroke: var(--fu-rule-strong); stroke-width: 1.5; stroke-dasharray: 5 5; }
.fu-tpl-empty__art .a-phone { fill: var(--fu-pen-tint); stroke: var(--fu-pen); stroke-width: 2; }
.fu-tpl-empty__art .a-arch { fill: color-mix(in srgb, var(--fu-pen) 22%, var(--fu-pen-tint)); }
.fu-tpl-empty__art .a-line { fill: var(--fu-pen); }
.fu-tpl-empty__art .a-line--soft { fill: color-mix(in srgb, var(--fu-pen) 40%, var(--fu-pen-tint)); }
.fu-tpl-empty__art .a-btn { fill: var(--fu-pen); }
.fu-tpl-empty__art .a-file { fill: var(--fu-surface); stroke: var(--fu-ink); stroke-width: 1.75; stroke-linejoin: round; }
.fu-tpl-empty__art .a-fold { fill: none; stroke: var(--fu-ink); stroke-width: 1.75; stroke-linejoin: round; }
.fu-tpl-empty__art .a-code { fill: var(--fu-pen); font: 700 15px/1 var(--fu-font); }
.fu-tpl-empty__art .a-arrow, .fu-tpl-empty__art .a-arrow-head { fill: none; stroke: var(--fu-ink-muted); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fu-tpl-empty__art .a-arrow { stroke-dasharray: 3 5; }
.fu-tpl-empty__art .a-spark { fill: var(--fu-gilt); }
@media (forced-colors: active) { .fu-tpl-empty__art * { fill: none; stroke: CanvasText; } .fu-tpl-empty__art text { fill: CanvasText; stroke: none; } }
.fu-tpl-filter { display: grid; gap: var(--fu-space-1); max-inline-size: 22rem; margin-block: var(--fu-space-6) 0; }
.fu-tpl-filter label { font-weight: 600; font-size: var(--fu-text-meta); }
.fu-tpl-filter input { margin: 0; }
.fu-tpl-filter .fu-meta { margin: var(--fu-space-2) 0 0; }
.fu-tpl-group { margin-block-start: var(--fu-space-7); }
.fu-tpl-group h2 { display: flex; align-items: baseline; gap: var(--fu-space-2); margin: 0 0 var(--fu-space-3); font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }
.fu-tpl-group__count { font-size: var(--fu-text-meta); font-weight: 600; color: var(--fu-ink-muted); }
.fu-tpls, .fu-tpl-grid { list-style: none; margin: 0; padding: 0; }
.fu-tpls li, .fu-tpl-grid li { list-style: none; margin: 0; }
.fu-tpls { border-block-start: 1px solid var(--fu-rule); }
.fu-tpl { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; column-gap: var(--fu-space-4); row-gap: 0.125rem; align-items: start;
  grid-template-areas: "thumb name status" "thumb meta status" "thumb note status" "thumb next status";
  padding: var(--fu-space-3) var(--fu-space-2); border-block-end: 1px solid var(--fu-rule); color: var(--fu-ink); text-decoration: none; transition: background-color 150ms var(--fu-ease-out); }
.fu-tpl:hover { background: var(--fu-surface-sunk); color: var(--fu-ink); }
.fu-tpl:focus-visible, .fu-tpl-card:focus-visible { outline: 2px solid var(--fu-pen); outline-offset: 2px; }
.fu-tpl__thumb { grid-area: thumb; align-self: center; display: grid; place-items: center; inline-size: 3rem; aspect-ratio: 3 / 4; border-radius: 0.375rem; overflow: hidden; background: var(--fu-surface-sunk); color: var(--fu-ink-muted); box-shadow: 0 1px 2px rgb(10 10 10 / 0.08); }
.fu-tpl__thumb:not(:has(img)) { border: 1px dashed var(--fu-rule-strong); box-shadow: none; }
.fu-tpl__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
.fu-tpl__name { grid-area: name; font-weight: 650; overflow-wrap: anywhere; }
.fu-tpl > .fu-status { grid-area: status; align-self: center; }
.fu-tpl__meta { grid-area: meta; font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
.fu-tpl__note { grid-area: note; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: var(--fu-text-meta); color: var(--fu-ink); }
.fu-tpl__next { grid-area: next; font-size: var(--fu-text-meta); font-weight: 600; color: var(--fu-ink); }
.fu-tpl:has([data-state="revise"]) .fu-tpl__note { color: var(--fu-error); }
.fu-tpl__meta strong, .fu-tpl-card__meta strong { color: var(--fu-ink); font-weight: 650; }
.fu-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--fu-space-5) var(--fu-space-4); }
.fu-tpl-card { display: grid; gap: 0.25rem; justify-items: start; color: var(--fu-ink); text-decoration: none; border-radius: 0.5rem; }
.fu-tpl-card:hover { color: var(--fu-ink); }
.fu-tpl-card__cover { display: grid; place-items: center; justify-self: stretch; aspect-ratio: 9 / 19.5; margin-block-end: var(--fu-space-2); border-radius: 12% / 5.5%; overflow: hidden; background: var(--fu-surface-sunk); color: var(--fu-ink-muted);
  box-shadow: 0 1px 2px rgb(10 10 10 / 0.08), 0 2px 8px rgb(10 10 10 / 0.06); transition: transform 200ms var(--fu-ease-out), box-shadow 200ms var(--fu-ease-out); }
.fu-tpl-card__cover:not(:has(img)) { border: 1px dashed var(--fu-rule-strong); box-shadow: none; }
.fu-tpl-card__cover img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
.fu-tpl-card:is(:hover, :focus-visible) .fu-tpl-card__cover { transform: translateY(-3px); box-shadow: 0 4px 8px rgb(10 10 10 / 0.10), 0 14px 28px rgb(10 10 10 / 0.14); }
.fu-tpl-card__name { font-weight: 650; overflow-wrap: anywhere; }
.fu-tpl-card__meta { font-size: var(--fu-text-meta); color: var(--fu-ink-muted); }
.fu-status { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1875rem 0.625rem; border: 1px solid transparent; border-radius: 999px;
  font-size: var(--fu-text-meta); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.fu-status .fu-icon { inline-size: 0.875rem; block-size: 0.875rem; }
.fu-status[data-state="draft"] { border: 1px dashed var(--fu-rule-strong); color: var(--fu-ink-muted); }
.fu-status[data-state="pending"] { background: #fdf3e3; color: #7a4f00; }          /* 6.4:1 */
.fu-status[data-state="revise"] { background: var(--fu-error-tint); color: var(--fu-error); }
.fu-status[data-state="approved"] { border-color: var(--fu-rule); color: var(--fu-ink-muted); }
.fu-tpl-card .fu-status { white-space: normal; }
/* Phones: the chip drops under the name so long names keep the width. */
@media (max-width: 479.98px) {
  .fu-tpl { grid-template-columns: 3rem minmax(0, 1fr); grid-template-areas: "thumb name" "thumb status" "thumb meta" "thumb note" "thumb next"; }
  .fu-tpl > .fu-status { justify-self: start; margin-block: 0.125rem; }
}
@media (prefers-reduced-motion: reduce) { .fu-tpl-card__cover { transition: none; } .fu-tpl-card:is(:hover, :focus-visible) .fu-tpl-card__cover { transform: none; } }
@media (forced-colors: active) { .fu-status { border: 1px solid CanvasText; } }