/* ============================================================================
   ShoutCreate — Bento design system (classic Japanese "obento" palette)
   Shared across every customer-facing page. Flat block colours, no gradients.
   Light + dark. Include <link rel="stylesheet" href="bento.css"> and add
   class="bento-page" to <body>. Toggle dark with class "bento-dark" on <html>.
   ============================================================================ */

:root{
  --paper:#FAFAF8;      /* near-white designer neutral */
  --paper-2:#F1EFEA;    /* faint band                  */
  --ink:#1E1A14;        /* sumi ink                    */
  --card:#FFFFFF;       /* clean white card            */
  --line:rgba(30,26,20,.10);
  --muted:#726A57;      /* soft body text      */
  /* Brighter obento palette (Canva-market vivid, still tasteful) */
  --matcha:#A7C64F;     --matcha-d:#8FB236;
  --tamago:#FFC63B;     --tamago-d:#F0B21F;
  --salmon:#FF8B5A;
  --umeboshi:#EE4230;   --umeboshi-d:#D8331F;   /* vermilion accent + logo */
  --indigo:#33488E;
  --paper-on-dark:#F6F1E4;

  --r:26px; --r-sm:16px; --r-pill:999px;
  /* THE TWO-PART SHADOW (Cupertino refinement 4 of 9).
     A contact shadow — tight, close, carries the weight — PLUS an ambient one
     — wide, faint, carries the room. One blur cannot do both jobs, which is
     why a single large shadow always reads slightly cheap. The old first stop
     was a hard 2px offset with no blur, which is a printed-sticker edge, not
     a shadow. */
  --shadow:0 1px 2px rgba(33,28,20,.06), 0 14px 32px -20px rgba(33,28,20,.32);
  --shadow-lift:0 2px 4px rgba(33,28,20,.07), 0 26px 52px -22px rgba(33,28,20,.40);
  /* THE HAIRLINE RING (refinement 3). One inset pixel inside every card. Ink
     at 7% on pale surfaces, light at 13% on the dark and colour blocks. It
     costs nothing and it is what stops a flat colour rectangle reading as a
     flat colour rectangle — the edge catches, the way a printed card has an
     edge. Applied as the FIRST stop of a box-shadow list so it composes with
     the two-part shadow above rather than competing with the border. */
  --ring:inset 0 0 0 1px rgba(30,26,20,.07);
  --ring-on-dark:inset 0 0 0 1px rgba(255,255,255,.13);
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1240px;

  /* ---- THE APPLE STACK (refinement 1), AND WHY IT IS THREE TOKENS ---------
     What was here asked for "Helvetica Neue" FIRST, so on a Mac — the machine
     most likely to have SF — the site rendered in Helvetica and never once
     used the system face. That single word was the whole "not quite Apple"
     tell.

     SF Pro Display and SF Pro Text are cut DIFFERENTLY and both ship on
     macOS/iOS: Display has tighter default fit and finer strokes for large
     sizes, Text has a taller x-height and looser fit so small copy stays
     readable. Naming them explicitly is what gets the right one — bare
     -apple-system resolves to Text at every size, which is why headlines set
     that way look slightly soft.

     Inter Tight is the fallback that behaves most like SF Display, so the
     Chromebooks land near it instead of on Roboto. */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter Tight","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
html.bento-dark{
  --paper:#16130E;      /* sumi night        */
  --paper-2:#1F1A12;
  --ink:#F6F1E4;        /* text goes light   */
  --card:#221C14;       /* warm charcoal card*/
  --line:rgba(246,241,228,.14);
  --muted:#AEA695;
  --shadow:0 1px 2px rgba(0,0,0,.34), 0 18px 40px -24px rgba(0,0,0,.66);
  --shadow-lift:0 2px 5px rgba(0,0,0,.38), 0 30px 58px -24px rgba(0,0,0,.74);
  /* On a dark card an ink ring is invisible — the ring has to be light or the
     edge definition simply disappears at night, which is exactly where card
     boundaries are hardest to read. */
  --ring:inset 0 0 0 1px rgba(246,241,228,.10);
}

/* ---- premium polish utilities (shared) ---- */
.bento-reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.bento-reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .bento-reveal{ opacity:1; transform:none; transition:none; } }
.bento-lift{ transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.bento-lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.bento-gradient-text{ background:linear-gradient(100deg,var(--umeboshi),var(--salmon)); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Clickable cards get a subtle premium lift on hover (text cards stay put). */
a.bento-card{ transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
a.bento-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
@media(prefers-reduced-motion:reduce){ a.bento-card:hover{ transform:none; } }

/* ---- base ---- */
.bento-page{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); -webkit-font-smoothing:antialiased;
  line-height:1.55; letter-spacing:-.005em;
  /* Optical sizing lets SF pick its display cut automatically at large sizes.
     The smoothing PAIR matters: antialiased alone thins light text on the dark
     ink blocks until it goes chalky; grayscale on the Mac side holds it. */
  font-optical-sizing:auto;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.bento-page *{ box-sizing:border-box; }
/* Plain links inherit surrounding colour — but NOT buttons, and NOT cards that
   are themselves links (a card must keep its own block-colour text rules). */
.bento-page a:not(.bento-btn):not(.bento-card){ color:inherit; }
.bento-page a{ text-decoration:none; }
.bento-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }
@media(max-width:640px){ .bento-wrap{ padding:0 20px; } }

/* ---- top nav (rounded pill bar) ---- */
.bento-nav{
  position:sticky; top:14px; z-index:60;
  max-width:var(--maxw); margin:14px auto 0; padding:12px 20px;
  display:flex; align-items:center; gap:20px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-pill);
  box-shadow:0 10px 30px -22px rgba(26,23,18,.5);
}
.bento-brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; letter-spacing:-.02em; color:var(--ink); }
/* Brand logo mark — its own red on all fixed pages (nav + footer). */
.bento-brand-mark{ width:28px; height:28px; display:grid; place-items:center; color:#EE4230; }
.bento-footer .bento-brand-mark{ color:#EE4230 !important; }
.bento-brand-mark svg{ width:100%; height:100%; }
.bento-nav-links{ display:flex; align-items:center; gap:22px; margin-left:8px; }
.bento-nav-links a{ font-size:14px; font-weight:600; color:var(--muted); transition:color .15s; }
.bento-nav-links a:hover{ color:var(--ink); }
.bento-nav-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }
@media(max-width:820px){ .bento-nav-links{ display:none; } }

.bento-theme-toggle{
  width:38px; height:38px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.bento-theme-toggle:hover{ background:var(--paper); }
.bento-theme-toggle .ic-sun{ display:none; }
html.bento-dark .bento-theme-toggle .ic-moon{ display:none; }
html.bento-dark .bento-theme-toggle .ic-sun{ display:inline; }

/* ---- headings / text ---- */
/* THE SMALL-CAPS LABEL (refinement 5). Mono, 11px, .14em. It was 12px/.16em
   in the body face, which at that tracking reads as decoration rather than as
   a label. A monospaced face is what makes a tracked-out uppercase string look
   deliberate — the even widths are the point. */
.bento-eyebrow{ display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--umeboshi); }

/* HEADLINE WEIGHT 850 -> 780, TRACKING TIGHTENED (refinement 2, and the single
   biggest difference in the whole pass). SF Display closes its counters up at
   850 — the holes inside a, e, g fill in and the word loses its shape at hero
   sizes. Lighter and tighter reads BIGGER and sharper, not smaller. Test any
   change to these three lines on the longest headline on the site, not the
   shortest. */
.bento-h1,.bento-h2,.bento-h3{ font-family:var(--font-display); font-optical-sizing:auto; }
.bento-h1{ font-size:clamp(38px,5vw,66px); font-weight:780; letter-spacing:-.042em; line-height:.96; margin:.3em 0; }
.bento-h2{ font-size:clamp(26px,3.2vw,40px); font-weight:780; letter-spacing:-.036em; line-height:1.04; margin:0 0 .4em; }
.bento-h3{ font-size:clamp(19px,2vw,25px); font-weight:740; letter-spacing:-.026em; margin:0 0 .4em; }
.bento-lead{ font-size:clamp(16px,1.5vw,18px); color:var(--muted); line-height:1.6; margin:0 0 1.4em; max-width:60ch; }
.bento-muted{ color:var(--muted); }
.bento-page h1,.bento-page h2,.bento-page h3{ color:var(--ink); }

/* ---- section + grid ---- */
.bento-section{ padding:34px 0; }
.bento-section.tight{ padding:20px 0; }
.bento-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.col-3{ grid-column:span 3; } .col-4{ grid-column:span 4; } .col-5{ grid-column:span 5; }
.col-6{ grid-column:span 6; } .col-7{ grid-column:span 7; } .col-8{ grid-column:span 8; }
.col-9{ grid-column:span 9; } .col-12{ grid-column:span 12; }
.row-2{ grid-row:span 2; }
@media(max-width:900px){
  .bento-grid{ grid-template-columns:repeat(6,1fr); }
  .col-3,.col-4,.col-5{ grid-column:span 3; }
  .col-6,.col-7,.col-8{ grid-column:span 6; }
  .col-9,.col-12{ grid-column:span 6; }
}
@media(max-width:560px){
  .bento-grid{ grid-template-columns:1fr; }
  [class*="col-"]{ grid-column:1 / -1; }
}

/* ---- cards ---- */
.bento-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 32px; box-shadow:var(--ring),var(--shadow); position:relative; overflow:hidden;
}
/* The colour and ink blocks carry no border (border-color:transparent below),
   so without a light ring their edges are pure flat colour. */
.bento-card.is-ink,.bento-card.is-indigo,.bento-card.is-umeboshi,
.bento-card.is-matcha,.bento-card.is-tamago,.bento-card.is-salmon{
  box-shadow:var(--ring-on-dark),var(--shadow);
}
.bento-card.is-matcha,.bento-card.is-tamago,.bento-card.is-salmon{
  box-shadow:inset 0 0 0 1px rgba(26,23,18,.09),var(--shadow);
}
.bento-card.pad-lg{ padding:44px 46px; }
.bento-card.center{ text-align:center; }
.bento-card.flush{ box-shadow:none; }
/* HOVER ACTUALLY MOVES (refinement 9) — 2px on the shared easing curve, and
   the shadow grows with it so the lift is lit rather than just translated. */
a.bento-card:hover,.bento-lift:hover{ transform:translateY(-2px); }
/* block-colour variants.
   NB: "ink" blocks must stay DARK in both themes, so they use a fixed sumi tone
   (not var(--ink), which flips to light in dark mode). */
.bento-card.is-ink{ background:#1F1A14; color:var(--paper-on-dark); border-color:transparent; }
html.bento-dark .bento-card.is-ink{ background:#2A241C; border:1px solid rgba(246,241,228,.10); }
.bento-card.is-ink h1,.bento-card.is-ink h2,.bento-card.is-ink h3{ color:var(--paper-on-dark); }
.bento-card.is-ink .bento-lead,.bento-card.is-ink .bento-muted{ color:rgba(246,241,228,.74); }
.bento-card.is-indigo{ background:var(--indigo); color:#F6F1E4; border-color:transparent; }
.bento-card.is-indigo h1,.bento-card.is-indigo h2,.bento-card.is-indigo h3{ color:#F6F1E4; }
.bento-card.is-indigo .bento-lead{ color:rgba(246,241,228,.8); }
.bento-card.is-matcha{ background:var(--matcha); color:#1A1712; border-color:transparent; }
.bento-card.is-tamago{ background:var(--tamago); color:#1A1712; border-color:transparent; }
.bento-card.is-salmon{ background:var(--salmon); color:#1A1712; border-color:transparent; }
.bento-card.is-umeboshi{ background:var(--umeboshi); color:#F6F1E4; border-color:transparent; }
.bento-card.is-umeboshi h1,.bento-card.is-umeboshi h2,.bento-card.is-umeboshi h3{ color:#F6F1E4; }
/* accent-block cards force dark headings/eyebrows regardless of theme */
.bento-card.is-matcha h1,.bento-card.is-matcha h2,.bento-card.is-matcha h3,
.bento-card.is-tamago h1,.bento-card.is-tamago h2,.bento-card.is-tamago h3,
.bento-card.is-salmon h1,.bento-card.is-salmon h2,.bento-card.is-salmon h3{ color:#1A1712; }
.bento-card.is-matcha .bento-eyebrow,.bento-card.is-tamago .bento-eyebrow,.bento-card.is-salmon .bento-eyebrow{ color:#1A1712; opacity:.72; }
.bento-card.is-ink .bento-eyebrow,.bento-card.is-indigo .bento-eyebrow,.bento-card.is-umeboshi .bento-eyebrow{ color:var(--tamago); }
/* Body-copy legibility on every colour block (independent of theme). Dark blocks
   get warm-paper text; light accent blocks get sumi text. */
.bento-card.is-ink .bento-lead,.bento-card.is-ink .bento-muted,.bento-card.is-ink p,
.bento-card.is-indigo .bento-lead,.bento-card.is-indigo .bento-muted,.bento-card.is-indigo p,
.bento-card.is-umeboshi .bento-lead,.bento-card.is-umeboshi .bento-muted,.bento-card.is-umeboshi p{ color:rgba(246,241,228,.82) !important; }
.bento-card.is-umeboshi h1,.bento-card.is-umeboshi h2,.bento-card.is-umeboshi h3{ color:#F6F1E4; }
.bento-card.is-matcha .bento-lead,.bento-card.is-matcha .bento-muted,.bento-card.is-matcha p,
.bento-card.is-tamago .bento-lead,.bento-card.is-tamago .bento-muted,.bento-card.is-tamago p,
.bento-card.is-salmon .bento-lead,.bento-card.is-salmon .bento-muted,.bento-card.is-salmon p{ color:rgba(26,23,18,.82) !important; }

/* TABULAR FIGURES (refinement 6) so a row of stats shares one rhythm and does
   not shimmer when a number changes. Display face, and the same weight cut as
   the headings for the same reason. */
.bento-stat strong{ display:block; font-family:var(--font-display); font-variant-numeric:tabular-nums; font-size:clamp(40px,4vw,56px); font-weight:800; letter-spacing:-.045em; line-height:1; }
.bento-stat span{ display:block; font-size:14px; margin-top:10px; opacity:.8; font-weight:600; }

/* ---- buttons ---- */
.bento-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:700; line-height:1;
  letter-spacing:-.012em;
  padding:13px 22px; border-radius:14px; border:1px solid transparent;
  background:var(--ink); color:var(--paper);
  /* An inner top highlight is the oldest trick on an Apple control and still
     the cheapest: one hairline of white at the top edge reads as a lit surface
     rather than a filled rectangle. */
  box-shadow:0 1px 2px rgba(33,28,20,.16), inset 0 1px 0 rgba(255,255,255,.16);
  transition:filter .18s var(--ease), background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.bento-btn:hover{ transform:translateY(-1px); }
.bento-btn:active{ transform:translateY(0); }
/* TINTED, NOT GREY (refinement 8). A grey shadow under a saturated button
   turns the colour muddy where it matters most; the shadow has to be a darker
   version of the button's OWN hue. */
.bento-btn.is-accent{
  box-shadow:0 1px 2px rgba(190,140,20,.26), 0 10px 22px -12px rgba(190,140,20,.46),
             inset 0 1px 0 rgba(255,255,255,.45);
}
.bento-btn.is-umeboshi{
  box-shadow:0 1px 2px rgba(150,35,20,.26), 0 10px 22px -12px rgba(150,35,20,.48),
             inset 0 1px 0 rgba(255,255,255,.22);
}
.bento-btn.is-ghost{ box-shadow:none; }
html.bento-dark .bento-btn{ background:var(--tamago); color:#1A1712; }
.bento-btn:hover{ filter:brightness(.96); }
.bento-btn:active{ transform:translateY(1px); }
.bento-btn.is-accent{ background:var(--tamago); color:#1A1712; }
.bento-btn.is-umeboshi{ background:var(--umeboshi); color:#F6F1E4; }
.bento-btn.is-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.bento-btn.is-ghost:hover{ background:var(--card); filter:none; }
.bento-btn.lg{ font-size:16px; padding:16px 28px; }
.bento-btn[disabled]{ opacity:.5; cursor:default; }

/* on dark blocks, keep buttons legible */
.bento-card.is-ink .bento-btn, .bento-card.is-indigo .bento-btn, .bento-card.is-umeboshi .bento-btn{ background:var(--tamago); color:#1A1712; }
.bento-card.is-ink .bento-btn.is-ghost, .bento-card.is-indigo .bento-btn.is-ghost, .bento-card.is-umeboshi .bento-btn.is-ghost{ background:transparent; color:#F6F1E4; border-color:rgba(246,241,228,.4); }

/* ---- small parts ---- */
.bento-pill{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); padding:6px 13px; border-radius:var(--r-pill); }
.bento-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.bento-list li{ position:relative; padding-left:28px; font-size:15px; }
.bento-list li::before{ content:""; position:absolute; left:0; top:.5em; width:12px; height:12px; border-radius:4px; background:var(--matcha); }
.bento-list li.off{ opacity:.45; }
.bento-list li.off::before{ background:var(--line); }
.bento-back{ display:inline-flex; align-items:center; gap:8px; font-weight:650; color:var(--muted); }
.bento-back:hover{ color:var(--ink); }

/* ---- footer ---- */
.bento-footer{ margin-top:36px; }
.bento-footer .bento-card{ background:#1F1A14; color:var(--paper-on-dark); border-color:transparent; padding:44px 46px; }
html.bento-dark .bento-footer .bento-card{ background:#2A241C; border:1px solid rgba(246,241,228,.10); }
.bento-footer h2{ color:var(--paper-on-dark); }
.bento-footer a{ color:var(--tamago); font-weight:600; }
.bento-footer .fnote{ color:rgba(246,241,228,.6); font-size:13px; line-height:1.9; margin-top:14px; }

/* ---- Dark-mode contrast fix: callout boxes (.note) inside colour-block cards ----
   Base pages style .note with background:var(--paper), which flips to dark in dark
   mode. Cards whose text is a FIXED dark ink (salmon/tamago/matcha) then show dark
   text on a dark box. Force a mode-stable panel + matching text so notes stay legible
   in both light and dark, on every page. Left-accent border (tip/warn) is preserved. */
.bento-card.is-salmon .note,
.bento-card.is-tamago .note,
.bento-card.is-matcha .note{
  background:rgba(255,255,255,.5) !important;
  color:#1A1712 !important;
}
.bento-card.is-salmon .note *,
.bento-card.is-tamago .note *,
.bento-card.is-matcha .note *{ color:#1A1712 !important; }
.bento-card.is-umeboshi .note{
  background:rgba(246,241,228,.10) !important;
  color:#F6F1E4 !important;
}
.bento-card.is-umeboshi .note *{ color:#F6F1E4 !important; }