/* taluvu WEB EDITION · "Kept" (W-24, founder's choice 2026-09-21).
 *
 * A quiet room of honest things: a sage limewash wall, paper you could hold, one window
 * light (every shadow falls down and to the right), the week as glazed tiles on an oak
 * ledge and the year in oak trays. Design source: docs/web/design-research/10-creative-
 * directions.md (Direction B) and the concept pages in docs/web/concepts/kept/.
 *
 * The web edition keeps the app's real screens, state and scrolling model. Phones receive
 * no element, attribute or layout rule from this file: every rule sits behind
 * (min-width:501px), and the sections web/kept.ts adds are created `hidden` and revealed
 * only at 1024px and wider. qa:web-wide proves phones are byte-identical.
 *
 * Motion: none added, except on the front door before any agreement (founder, 2026-09-25):
 * see web/front-door.ts. Everywhere else interaction is colour only, at --dur-press.
 */

/* Belt-and-braces hiding only. These are the two gate-approved rules outside a width
   query, and wide.ts does not create either node at phone widths. */
html.tw-web #tw-rail{display:none}
html.tw-web .tw-skip{position:fixed;left:12px;top:-72px}

@media (min-width:501px){
  html.tw-web{
    --tw-header-h:0px;
    --tw-content-max:1312px;
    --tw-reading:68ch;
    --k-wall:#E7EBE1;
    --k-wall-2:#DCE2D4;
    --k-paper:#FBFAF5;
    --k-slip:#F3F0E6;
    --k-ink:#1E2227;
    --k-ink-2:#42484E;
    --k-ink-3:#585E64;
    --k-rule:#D5D9CE;
    --k-rule-strong:#737B75;
    --k-bottle:#2B3F33;
    --k-bottle-press:#22342A;
    --k-link:#46643F;
    --k-oak:#A87B52;
    --k-focus:#9E4A1F;
    --k-biscuit:#E4DCCB;
    --k-sh-sheet:0 1px 1px rgba(30,34,39,.05),0 14px 28px -14px rgba(30,34,39,.22);
    --k-sh-slip:0 1px 1px rgba(30,34,39,.05),0 6px 14px -8px rgba(30,34,39,.18);
    --k-serif:"Fraunces",Georgia,"Times New Roman",serif;
    --k-sans:"DM Sans",-apple-system,"Segoe UI",sans-serif;
    /* A limewashed wall: a static, procedural grain at a few per cent. No image request. */
    --k-limewash:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16 0 0 0 0 .19 0 0 0 0 .15 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background:var(--k-wall) !important;
  }

  html.tw-web body{
    box-sizing:border-box;
    display:block !important;
    width:100%;height:100vh;height:100dvh;
    margin:0;padding:0;
    overflow:hidden;
    background:var(--k-wall) !important;
  }

  /* A page, not a device or a window. contain:layout remains the containing block for
     safety notices, writing overlays and sheets that use fixed positioning. */
  html.tw-web #app{
    position:relative;
    width:100% !important;
    height:100vh !important;height:100dvh !important;
    max-height:none !important;min-height:0 !important;
    margin:0 !important;padding:0 !important;
    border:0 !important;border-radius:0 !important;
    background:var(--k-wall) !important;
    box-shadow:none !important;
    transform:none !important;
    contain:layout;
    overflow:hidden;
  }
  html.tw-web #app::before,html.tw-web #app::after{display:none !important}
  html.tw-web #island{display:none !important}
  html.tw-web #viewport{
    width:100% !important;height:100% !important;
    border-radius:0 !important;
    background:var(--k-wall) !important;
  }
  html.tw-web #viewport:focus{outline:none}

  /* The iOS simulation chrome carries no web controls. */
  html.tw-web .sb{display:none !important}
  html.tw-web .hi{display:none !important}

  /* The wall. Flat limewash with its grain, never a gradient behind reading text. */
  html.tw-web #app .screen.scr-lt:not(#s-asha){
    background:var(--k-limewash),var(--k-wall) !important;
  }

  /* Scroll ownership stays with the app. The scrollbar reaches the browser edge while
     the content receives a comfortable page measure. */
  html.tw-web #app .scroll{
    box-sizing:border-box;
    width:100% !important;
    padding-top:30px !important;
    padding-right:max(24px,calc((100% - 780px) / 2)) !important;
    padding-bottom:112px !important;
    padding-left:max(24px,calc((100% - 780px) / 2)) !important;
    scrollbar-color:rgba(30,34,39,.28) transparent;
    scrollbar-gutter:stable;
  }
  html.tw-web #app #onb-scroll,
  html.tw-web #app .chat-area{scrollbar-color:rgba(30,34,39,.28) transparent}

  /* Tablets use the page surface and their familiar bottom navigation. */
  html.tw-web #app .tabs,
  html.tw-web #app .injected-tabs{max-width:none !important}

  /* Page titles in the book's voice: Fraunces, soft terminals, upright. */
  html.tw-web #s-story h1,
  html.tw-web #s-lifemap h1,
  html.tw-web #s-journal #j-header,
  html.tw-web #s-me > .scroll > h1,
  html.tw-web #s-me-privacy-support h1,
  html.tw-web #s-care-book h1,
  html.tw-web #s-meds h1,
  html.tw-web #s-condition-hub h1,
  html.tw-web #s-me-backup h1,
  html.tw-web #s-legal-doc h1,
  html.tw-web #s-legal-terms h1{
    font-family:var(--k-serif) !important;
    font-size:clamp(36px,4.4vw,56px) !important;
    font-weight:460 !important;
    font-variation-settings:"opsz" 72,"SOFT" 100,"WONK" 0;
    line-height:1.06 !important;
    letter-spacing:-.012em !important;
    color:var(--k-ink) !important;
  }
  html.tw-web #app .screen-sub{max-width:64ch;font-size:17px !important;line-height:1.55 !important}

  /* Desktop writing overlays stay inside the page canvas. The journal's was missed, so
     it was a whole window tall below the masthead and its Save bar hung off the screen
     (founder, 2026-09-29). */
  html.tw-web #journal-compose-overlay,
  html.tw-web #ci-note-compose-overlay,
  html.tw-web #field-compose-overlay{height:100% !important;max-height:100% !important}

  /* Window-fixed surfaces follow the web content area. */
  html.tw-web #ash-toast,
  html.tw-web #asha-moment,
  html.tw-web #ci-ack{
    left:50% !important;right:auto !important;
    max-width:min(720px,calc(100% - 40px)) !important;
  }
  html.tw-web body > div[style*="position:fixed"][style*="inset:0"]:not([style*="2147483647"]),
  html.tw-web body > div[style*="position: fixed"][style*="inset: 0"]:not([style*="2147483647"]){
    left:0 !important;right:0 !important;
    width:100% !important;
    top:var(--tw-header-h) !important;bottom:0 !important;
    height:auto !important;max-height:none !important;
    border-radius:0;overflow:hidden;
  }
  html.tw-web #beta-fb-btn{
    right:18px !important;left:auto !important;
    top:calc(var(--tw-header-h) + 14px) !important;
  }

  html.tw-web .tw-skip{
    z-index:1000;
    min-height:44px;box-sizing:border-box;
    padding:12px 16px;border-radius:12px;
    background:var(--k-ink);color:var(--k-paper);
    font:600 16px/1.2 var(--k-sans);
    text-decoration:none;
  }
  html.tw-web .tw-skip:focus{top:12px;outline:3px solid var(--k-focus);outline-offset:2px}
  html.tw-web .tw-skip-urgent{border:0;cursor:pointer}

  /* ── Urgent support (web/urgent.ts, safety review 13) ──────────────────
     The app's own crisis card colours: black ground, white text, red 999, amber NHS 111,
     white Samaritans and SHOUT. In the page flow under the masthead: while it is open its
     height is added to --tw-header-h, so it covers nothing. No motion. Quiet never
     touches it. */
  html.tw-web #tw-urgent-panel{
    position:fixed;z-index:81;left:0;right:0;top:var(--tw-rail-h,0px);
    box-sizing:border-box;max-height:calc(100dvh - var(--tw-rail-h,0px));overflow:auto;
    padding:22px max(24px,calc((100% - var(--tw-content-max)) / 2)) 22px;
    background:#000;color:#fff;border-bottom:2px solid #fff;
    font:400 17px/1.55 "DM Sans",-apple-system,"Segoe UI",sans-serif;
  }
  html.tw-web .tw-urgent-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:16px 40px;align-items:start}
  html.tw-web .tw-urgent-h{margin:0 0 8px;font:700 21px/1.3 "DM Sans",-apple-system,"Segoe UI",sans-serif;color:#fff}
  html.tw-web .tw-urgent-h:focus{outline:3px solid #fff;outline-offset:4px}
  html.tw-web .tw-urgent-text{margin:0 0 8px;max-width:60ch;color:#fff}
  html.tw-web .tw-urgent-text strong{font-weight:700}
  html.tw-web .tw-urgent-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html.tw-web .tw-urgent-link{
    display:flex;align-items:center;justify-content:center;box-sizing:border-box;
    min-height:48px;padding:6px 12px;border-radius:10px;
    font:700 17px/1.25 "DM Sans",-apple-system,"Segoe UI",sans-serif;text-align:center;text-decoration:none;
  }
  html.tw-web .tw-urgent-link.is-999{background:#B71C1C;color:#fff}
  html.tw-web .tw-urgent-link.is-111{background:#D4783C;color:#000}
  html.tw-web .tw-urgent-link.is-talk{background:#fff;color:#000;font-weight:600}
  html.tw-web .tw-urgent-close{
    grid-column:1 / -1;min-height:44px;
    border:1.5px solid rgba(255,255,255,.75);border-radius:10px;background:transparent;color:#fff;cursor:pointer;
    font:600 17px/1 "DM Sans",-apple-system,"Segoe UI",sans-serif;
  }
  html.tw-web .tw-urgent-link:focus-visible,
  html.tw-web .tw-urgent-close:focus-visible{outline:3px solid #fff;outline-offset:3px}

  /* The two full-screen recovery layers start below the masthead, like every overlay,
     so Urgent support is never covered (safety review 13, C1.4). */
  html.tw-web #record-recovery-lock,
  html.tw-web #taluvu-boot-recovery{top:var(--tw-header-h) !important}
}

@media (min-width:1024px){
  /* --tw-bar-h is the masthead bar itself. --tw-header-h is everything above the page:
     the bar, plus the Urgent support panel while it is open (web/urgent.ts). They are
     separate so the bar never grows with the panel. */
  html.tw-web{--tw-bar-h:76px;--tw-header-h:76px}

  html.tw-web body{padding-top:var(--tw-header-h)}
  html.tw-web #app{
    height:calc(100vh - var(--tw-header-h)) !important;
    height:calc(100dvh - var(--tw-header-h)) !important;
  }

  /* ── The masthead: a wall with a picture rail ──────────────────────────
     The internal #tw-rail name is retained so the mirror and the regression gate keep
     one stable anchor. */
  html.tw-web.tw-rail-on #tw-rail,
  html.tw-web.tw-brand-on #tw-rail{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto auto auto;
    column-gap:clamp(16px,2.4vw,40px);
    align-items:center;
    box-sizing:border-box;
    position:fixed;z-index:80;
    left:0;right:0;top:0;height:var(--tw-bar-h);width:100%;
    padding:0 max(32px,calc((100% - var(--tw-content-max)) / 2));
    border-bottom:1px solid rgba(168,123,82,.5);
    background:var(--k-wall);
    color:var(--k-ink);
    font-family:var(--k-sans);
  }
  html.tw-web #tw-rail .tw-brand{grid-column:1;margin:0;padding:0;line-height:1}
  html.tw-web #tw-rail .tw-brand .juntoh-wordmark{font-size:30px}
  html.tw-web #tw-rail .tw-tagline{display:none}
  html.tw-web #tw-rail nav{grid-column:2;min-width:0}
  html.tw-web #tw-rail ul{
    display:flex;align-items:center;justify-content:flex-start;
    gap:2px;list-style:none;margin:0;padding:0;
  }
  html.tw-web #tw-rail .tw-item{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    min-height:48px;
    box-sizing:border-box;padding:0 12px;
    border:0;border-radius:10px;
    background:transparent;color:var(--k-ink-2);cursor:pointer;
    font:500 17px/1 var(--k-sans);
    text-align:center;
    transition:background-color var(--dur-press,140ms) var(--ease-out-strong,ease-out),color var(--dur-press,140ms) var(--ease-out-strong,ease-out);
  }
  html.tw-web #tw-rail .tw-item .tw-ic{display:none}
  /* Where you are: heavier, darker AND underlined. Shape, never colour alone. */
  html.tw-web #tw-rail .tw-item[aria-current="page"]{color:var(--k-ink);font-weight:650}
  html.tw-web #tw-rail .tw-item[aria-current="page"]::after{
    content:"";position:absolute;left:12px;right:12px;bottom:6px;
    height:2px;border-radius:2px;
    background:var(--k-ink);
  }
  html.tw-web #tw-rail .tw-item:focus-visible,
  html.tw-web #tw-rail .tw-checkin:focus-visible{outline:3px solid var(--k-focus);outline-offset:2px}

  html.tw-web #tw-rail nav[data-tw-quiet="true"] .tw-item{opacity:.45;cursor:default}

  html.tw-web #tw-rail .tw-foot{
    grid-column:3;
    display:flex;align-items:center;justify-content:flex-end;gap:12px;
    margin:0;padding:0;
  }
  html.tw-web #tw-rail .tw-checkin{
    min-height:44px;padding:0 22px;
    border:0;border-radius:18px;
    background:var(--k-bottle);color:var(--k-paper);cursor:pointer;
    font:600 17px/1 var(--k-sans);
    transition:background-color var(--dur-press,140ms) var(--ease-out-strong,ease-out);
  }
  html.tw-web #tw-rail .tw-checkin:disabled{display:none}
  /* Urgent support: an outline, never red, no pulse or badge, full label at every width,
     the same place on every page. A direct child of the masthead, so it is never inside
     the navigation that goes inert, and pointer events always reach it. */
  html.tw-web #tw-rail .tw-urgent{
    grid-column:5;min-height:44px;padding:0 18px;
    border:1.5px solid var(--k-ink);border-radius:18px;background:transparent;color:var(--k-ink);
    font:600 17px/1 var(--k-sans);white-space:nowrap;cursor:pointer;pointer-events:auto;
    transition:background-color var(--dur-press,140ms) var(--ease-out-strong,ease-out);
  }
  html.tw-web #tw-rail .tw-urgent:focus-visible{outline:3px solid var(--k-focus);outline-offset:2px}
  /* Stop animation (founder, 2026-09-25): beside Urgent support on every page, quieter than
     it, a plain labelled button. A direct child of the masthead like Urgent support, so it
     stays pressable on the front door and in focused flows. See web/motion.ts. */
  html.tw-web #tw-rail .tw-motion{
    grid-column:4;min-height:44px;padding:0 6px;
    border:0;background:transparent;color:var(--k-ink-2);cursor:pointer;pointer-events:auto;
    font:500 16px/1 var(--k-sans);white-space:nowrap;
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  }
  html.tw-web #tw-rail .tw-motion:hover{color:var(--k-ink)}
  html.tw-web #tw-rail .tw-motion:focus-visible{outline:3px solid var(--k-focus);outline-offset:2px;border-radius:6px}

  /* Pre-app and focused moments keep a stable branded masthead without navigation
     competing with consent, onboarding, check-in or membership. */
  html.tw-web.tw-brand-on #tw-rail,
  html.tw-web.tw-focus-on #tw-rail{grid-template-columns:1fr auto auto;pointer-events:none}
  html.tw-web.tw-brand-on #tw-rail .tw-motion,
  html.tw-web.tw-focus-on #tw-rail .tw-motion{grid-column:2}
  html.tw-web.tw-brand-on #tw-rail .tw-urgent,
  html.tw-web.tw-focus-on #tw-rail .tw-urgent{grid-column:3}
  html.tw-web.tw-brand-on #tw-rail nav,
  html.tw-web.tw-brand-on #tw-rail .tw-foot,
  html.tw-web.tw-focus-on #tw-rail nav,
  html.tw-web.tw-focus-on #tw-rail .tw-foot{display:none}

  /* The masthead replaces each screen's copied mobile tab bar. */
  html.tw-web.tw-rail-on #app .tabs,
  html.tw-web.tw-rail-on #app .injected-tabs{display:none !important}

  /* Full-width scroll plane, one 12-column page grid. */
  html.tw-web #app .scroll{
    padding-top:clamp(40px,4vw,56px) !important;
    padding-right:max(32px,calc((100% - var(--tw-content-max)) / 2)) !important;
    padding-bottom:0 !important;
    padding-left:max(32px,calc((100% - var(--tw-content-max)) / 2)) !important;
  }

  /* Focused flows are intentionally quieter, like checkout or account setup. */
  html.tw-web.tw-brand-on #app .screen.active > .scroll,
  html.tw-web.tw-focus-on #app .screen.active > .scroll{
    padding-right:max(32px,calc((100% - 640px) / 2)) !important;
    padding-left:max(32px,calc((100% - 640px) / 2)) !important;
    padding-bottom:96px !important;
  }
  html.tw-web.tw-focus-on #s-paywall .pw-shell{max-width:640px;margin-inline:auto}
  /* Crisis support must settle immediately and completely, never glide behind the
     sticky purchase actions. */
  html.tw-web.tw-focus-on #s-paywall .pw-scroll{scroll-behavior:auto !important;padding-bottom:180px !important}

  /* The phone's painted park backdrop belongs to the phone. The room has a plain wall. */
  html.tw-web #app .screen.scr-lt:not(#s-asha)::before{display:none !important}

  /* ── Shared Kept pieces ───────────────────────────────────────────────── */
  html.tw-web .tw-k-label{margin:0;font:500 16px/1.4 var(--k-sans);color:var(--k-ink-3);letter-spacing:.01em}
  html.tw-web .tw-k-sentence{
    margin:6px 0 0;max-width:40em;
    font-family:var(--k-serif);font-weight:420;font-size:28px;line-height:1.3;
    font-variation-settings:"opsz" 36,"SOFT" 100,"WONK" 0;
    color:var(--k-ink);text-wrap:balance;
  }
  html.tw-web .tw-k-legend{
    list-style:none;margin:0;padding:0;
    display:grid;gap:8px;align-content:start;
    font:400 17px/1.3 var(--k-sans);color:var(--k-ink-2);
  }
  html.tw-web .tw-k-legend li{display:flex;align-items:center;gap:10px}
  html.tw-web .tw-k-swatch{
    width:18px;height:18px;border-radius:4px;flex:none;
    background:var(--tw-k-glaze);
    box-shadow:0 0 0 1px rgba(30,34,39,.5);
  }
  html.tw-web .tw-k-swatch.is-plain{background:var(--k-biscuit)}

  /* A glazed tile. The body is exactly the colour of the feeling the person chose; the
     glaze only lightens its top-left corner. The ink edge carries it on the light wall. */
  html.tw-web .tw-k-tile,
  html.tw-web .tw-k-cell{
    display:block;position:relative;
    margin:0;padding:0;border:0;cursor:pointer;
    background-color:var(--k-biscuit);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(30,34,39,.42),0 6px 10px -8px rgba(30,34,39,.55);
    transition:filter var(--dur-press,140ms) var(--ease-out-strong,ease-out);
  }
  html.tw-web .tw-k-tile.is-rated,
  html.tw-web .tw-k-cell.is-rated{
    background-color:var(--tw-k-glaze);
    background-image:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,0) 44%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(30,34,39,.55),0 6px 10px -8px rgba(30,34,39,.55);
  }
  /* Recorded but not rated: unglazed biscuit with a small pressed mark. */
  html.tw-web .tw-k-tile.is-unrated::after,
  html.tw-web .tw-k-cell.is-unrated::after{
    content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;
    border-radius:50%;background:rgba(30,34,39,.55);
  }
  /* Nothing recorded: an empty place in the tray, never a mark against anyone. */
  html.tw-web .tw-k-tile.is-empty,
  html.tw-web .tw-k-cell.is-empty,
  html.tw-web .tw-k-tile.is-today:not(.is-rated),
  html.tw-web .tw-k-cell.is-today:not(.is-rated){
    background-color:transparent;
    box-shadow:inset 0 0 0 1.5px rgba(30,34,39,.3);
  }
  html.tw-web .tw-k-tile.is-today,
  html.tw-web .tw-k-cell.is-today{outline:2px solid var(--k-ink);outline-offset:3px}
  html.tw-web .tw-k-tile:focus-visible,
  html.tw-web .tw-k-cell:focus-visible{outline:3px solid var(--k-focus);outline-offset:3px}

  /* The footer every page ends with. */
  html.tw-web .tw-k-footer[hidden]{
    display:grid !important;
    grid-column:1 / -1 !important;grid-row:auto !important;order:99 !important;
    grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,2fr);
    gap:48px;
    margin:96px 0 0;padding:40px 0 64px;
    border-top:1px solid var(--k-rule);
    font:400 17px/1.6 var(--k-sans);color:var(--k-ink-2);
  }
  html.tw-web .tw-k-footer p{margin:10px 0 0;max-width:42em}
  html.tw-web .tw-k-footer .juntoh-wordmark{font-size:26px}
  html.tw-web .tw-k-foot-h{margin:0;font:600 17px/1.4 var(--k-sans);color:var(--k-ink)}
  html.tw-web .tw-k-foot-links{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  html.tw-web .tw-k-footer .tw-legal-link{
    min-height:44px;padding:0;
    border:0;background:transparent;cursor:pointer;
    font:500 17px/1 var(--k-sans);color:var(--k-link);
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  }
  html.tw-web .tw-k-footer .tw-legal-link:focus-visible{outline:3px solid var(--k-focus);outline-offset:3px}

  /* ── Home: the desk by the window ──────────────────────────────────────── */
  html.tw-web #home-scroll{
    display:grid !important;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:max-content;
    column-gap:32px;row-gap:32px;
    align-content:start;align-items:start;
  }
  html.tw-web #home-scroll > *{grid-column:1 / 8;min-width:0;margin:0 !important;order:5}
  html.tw-web #home-analytics-notice,
  html.tw-web #home-setup-card,
  html.tw-web #home-activation-card,
  html.tw-web #home-name-prompt{order:1 !important}
  html.tw-web #today-region{order:2 !important}
  html.tw-web #tw-k-checkin{order:3 !important}
  html.tw-web #tw-k-week{order:4 !important;grid-column:1 / -1 !important}
  /* The clay film is the phone's Home. On the website Home's own clay scene takes its place. */
  html.tw-web #mv-home{display:none !important}

  html.tw-web #tw-k-art[hidden]{
    display:block !important;
    grid-column:9 / 13 !important;grid-row:1 / span 3;order:0 !important;
    margin:0 !important;
  }
  html.tw-web #tw-k-art video.tw-clay{aspect-ratio:3 / 4;object-position:50% 56%;border-radius:2px}
  html.tw-web .tw-k-caption{margin-top:12px;text-align:right;font:400 16px/1.4 var(--k-sans);color:var(--k-ink-3)}

  /* Today: an editorial header, not a card. */
  html.tw-web #today-region{
    background:none !important;border:0 !important;box-shadow:none !important;
    border-radius:0 !important;padding:0 !important;min-height:0 !important;
    overflow:visible !important;
  }
  html.tw-web #today-region .today-voice::before,
  html.tw-web #today-region .today-voice::after{display:none !important}
  html.tw-web #today-region .today-atmosphere,
  html.tw-web #today-region .today-kicker-label,
  html.tw-web #today-region .today-speaker,
  html.tw-web #today-region .apr{display:none !important}
  html.tw-web #today-region .today-kicker{display:block;margin:0 0 10px;text-transform:none;letter-spacing:0}
  html.tw-web #home-date{display:inline;padding:0;background:none;border:0;font:500 16px/1.4 var(--k-sans) !important;color:var(--k-ink-3) !important;letter-spacing:.01em}
  html.tw-web #today-region .today-person{display:flex;align-items:flex-end;gap:18px;margin:0}
  html.tw-web #today-region .today-welcome{min-width:0}
  html.tw-web #home-greeting{
    margin:0 !important;
    font-family:var(--k-serif) !important;font-weight:460 !important;
    font-size:clamp(44px,4vw,60px) !important;line-height:1.04 !important;
    font-variation-settings:"opsz" 72,"SOFT" 100,"WONK" 0;
    letter-spacing:-.012em !important;color:var(--k-ink) !important;
  }
  html.tw-web #today-region .today-asha-door{flex:none;width:56px;height:56px;padding:0;margin:0 0 6px}
  html.tw-web #today-region .today-asha-door .asha-pulse-wrap,
  html.tw-web #today-region .today-asha-door img{width:56px !important;height:56px !important}
  html.tw-web #today-region .today-voice{margin:18px 0 0;padding:0;background:none !important;border:0 !important;box-shadow:none !important}
  html.tw-web #today-line{
    max-width:34em;padding:0 !important;
    font:400 21px/1.55 var(--k-sans) !important;color:var(--k-ink-2) !important;
  }
  /* Asha's reply after a check-in (founder, 2026-09-25): body text on the website, not the
     phone's 13.5px, at a reading measure. The app's own bubble colours stay. */
  html.tw-web #home-asha-msg{
    max-width:34em;margin:16px 0 0 !important;padding:14px 20px !important;
    font:400 19px/1.5 var(--k-sans) !important;
  }
  /* The app's pop-up message (toast), such as "Saved" after a check-in (founder,
     2026-09-25): readable text, not the phone's 13.5px, and at the bottom of the window,
     where the phone keeps its bottom bar, so it never covers the choice just made. */
  html.tw-web #ash-toast{
    bottom:24px !important;padding:14px 24px !important;border-radius:16px !important;
    font:500 18px/1.4 var(--k-sans) !important;
  }
  html.tw-web #today-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
  html.tw-web #today-actions .today-primary{
    min-height:56px;width:auto !important;padding:0 28px;
    border:0;border-radius:18px;
    background:var(--k-bottle) !important;color:var(--k-paper) !important;
    font:600 18px/1 var(--k-sans) !important;box-shadow:none !important;
  }
  html.tw-web #today-actions .today-quiet-row{display:flex;gap:16px;margin:0;width:auto}
  html.tw-web #today-actions .today-quiet{
    min-height:44px;padding:0 4px;width:auto !important;
    border:0 !important;background:none !important;box-shadow:none !important;
    font:500 17px/1 var(--k-sans) !important;color:var(--k-link) !important;
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  }

  /* The check-in card: one sheet of paper and the app's own five mood buttons (founder,
     2026-09-25, replacing neutral pebbles). Each feeling wears the app's colour on its dot,
     always with its word; the choice shows as a ring and a tick, never by colour alone.
     The button itself takes no colour. Dot sizes are set so choosing moves nothing. */
  html.tw-web #tw-k-checkin[hidden]{
    display:block !important;
    box-sizing:border-box;padding:26px 32px 20px;
    background:var(--k-paper);border:1px solid var(--k-rule);border-radius:2px;
    box-shadow:var(--k-sh-sheet);
  }
  html.tw-web .tw-k-checkin-h{margin:0 0 20px;padding:0 0 16px;border-bottom:1px solid var(--k-rule);font:600 20px/1.3 var(--k-sans);color:var(--k-ink)}
  html.tw-web .tw-k-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  html.tw-web .tw-k-choice{
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;
    min-height:112px;padding:14px 6px 12px;
    border:0;border-radius:14px;background:transparent;cursor:pointer;
    font:400 19px/1.2 var(--k-sans);color:#4F7264;
    transition:background-color var(--dur-press,140ms) var(--ease-out-strong,ease-out);
  }
  html.tw-web .tw-k-mood-dot{
    display:block;width:48px;height:48px;margin:4px 0;border-radius:50%;
    background:var(--tw-k-mood);box-shadow:0 3px 10px rgba(30,34,39,.18);
  }
  html.tw-web .tw-k-choice[aria-pressed="true"]{color:#26301F;font-weight:600}
  html.tw-web .tw-k-choice[aria-pressed="true"] .tw-k-mood-dot{width:56px;height:56px;margin:0;outline:3px solid #26301F;outline-offset:3px;box-shadow:0 6px 16px rgba(30,34,39,.26)}
  html.tw-web .tw-k-choice[aria-pressed="true"] .tw-k-choice-word::before{content:"\2713\00a0"}
  html.tw-web .tw-k-choice:focus-visible{outline:3px solid var(--k-focus);outline-offset:2px}
  html.tw-web .tw-k-checkin-foot{margin:14px 0 0;font:400 17px/1.4 var(--k-sans);color:var(--k-ink-3)}

  /* The week, standing on an oak ledge. */
  html.tw-web #tw-k-week[hidden]{display:block !important;padding-top:8px}
  html.tw-web .tw-k-shelf{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px 56px;margin-top:24px}
  html.tw-web .tw-k-shelf-tiles{
    list-style:none;margin:0;padding:0 10px;
    display:grid;grid-template-columns:repeat(7,80px);gap:18px;
    background:linear-gradient(var(--k-oak),var(--k-oak)) no-repeat 0 86px / 100% 3px;
  }
  html.tw-web .tw-k-shelf-tiles li{display:flex;flex-direction:column;align-items:center}
  html.tw-web .tw-k-tile{width:80px;height:80px;border-radius:8px}
  html.tw-web .tw-k-tile-cap{display:flex;flex-direction:column;align-items:center;margin-top:18px;font:400 16px/1.35 var(--k-sans);text-align:center}
  html.tw-web .tw-k-tile-day{font-weight:600;color:var(--k-ink)}
  html.tw-web .tw-k-tile-word{color:var(--k-ink-3)}

  /* The app's own cards sit below as notes on the wall, three to a row. */
  html.tw-web #home-scroll > #home-install-nudge,
  html.tw-web #home-scroll > #home-reminder-offer,
  html.tw-web #home-scroll > div:has(#home-strip),
  html.tw-web #home-scroll > #home-doctor-card,
  html.tw-web #home-scroll > #home-event-nudge,
  html.tw-web #home-scroll > #home-care-rows,
  html.tw-web #home-scroll > #home-continue,
  html.tw-web #home-scroll > #home-status-card{grid-column:span 4 !important;order:6 !important}
  html.tw-web #home-install-nudge > section,
  html.tw-web #home-reminder-offer > div,
  html.tw-web #home-scroll > div:has(#home-strip){
    box-sizing:border-box;
    background:var(--k-slip) !important;border:1px solid var(--k-rule) !important;border-radius:2px !important;
    box-shadow:var(--k-sh-slip) !important;
  }
  html.tw-web #home-install-nudge p,
  html.tw-web #home-reminder-offer p,
  html.tw-web #home-scroll > div:has(#home-strip) p{font-size:17px !important;line-height:1.5 !important;color:var(--k-ink-2) !important}
  /* The app's garden tells the week in flowers on a phone; here the tiles above tell
     it, so this note keeps only the energy part. */
  html.tw-web #home-scroll > div:has(#home-strip) > :nth-child(-n+5){display:none !important}
  html.tw-web #home-doctor-card > button{
    background:var(--k-paper) !important;border:1px solid var(--k-rule) !important;border-radius:2px !important;
    box-shadow:var(--k-sh-slip) !important;
  }

  /* ── Calendar: a year kept in oak trays ────────────────────────────────── */
  html.tw-web #s-lifemap > .scroll{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:max-content;
    align-content:start;gap:28px 32px;
  }
  html.tw-web #s-lifemap > .scroll > h1{grid-column:1 / 8;grid-row:1;margin:0 !important}
  html.tw-web #ash-explain-lifemap{grid-column:8 / -1;grid-row:1;margin:0}
  html.tw-web #tw-k-year[hidden]{
    display:grid !important;grid-column:1 / -1;grid-row:2;
    grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:40px;align-items:start;
  }
  html.tw-web #tw-k-year > *{grid-column:1}
  html.tw-web #tw-k-year > .tw-k-year-art{grid-column:2;grid-row:1 / span 3;margin:0}
  html.tw-web #tw-k-year > .tw-k-trays{grid-column:1 / -1}
  html.tw-web #s-lifemap > .scroll > .lm-panel:nth-of-type(2){grid-column:1 / 9;grid-row:3}
  html.tw-web #s-lifemap > .scroll > .lm-panel:nth-of-type(3){grid-column:9 / -1;grid-row:3;align-self:start}
  html.tw-web #s-lifemap > .scroll > .bottom-back{grid-column:1 / -1;justify-self:start}
  html.tw-web #s-lifemap .lm-panel{border-radius:2px;background:var(--k-paper) !important;box-shadow:var(--k-sh-slip) !important;border:1px solid var(--k-rule) !important}
  html.tw-web .tw-k-year-h{
    margin:0;font-family:var(--k-serif);font-weight:500;font-size:36px;line-height:1.14;
    font-variation-settings:"opsz" 48,"SOFT" 100,"WONK" 0;color:var(--k-ink);
  }
  html.tw-web #tw-k-year .tw-k-legend{grid-auto-flow:column;justify-content:start;gap:8px 22px;margin-top:18px}
  html.tw-web .tw-k-trays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:28px}
  html.tw-web .tw-k-tray{
    box-sizing:border-box;padding:14px 14px 16px;
    background:#EADFCC;border:1px solid var(--k-oak);border-radius:3px;
    box-shadow:inset 0 2px 6px rgba(30,34,39,.12),var(--k-sh-slip);
  }
  html.tw-web .tw-k-tray-h{
    margin:0 0 10px;font-family:var(--k-serif);font-weight:470;font-size:22px;line-height:1.2;
    font-variation-settings:"opsz" 24,"SOFT" 100,"WONK" 0;color:var(--k-ink);
  }
  html.tw-web .tw-k-tray-y{font-weight:380;color:var(--k-ink-3)}
  html.tw-web .tw-k-tray-wd,
  html.tw-web .tw-k-tray-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  html.tw-web .tw-k-tray-wd{margin-bottom:6px;font:500 16px/1 var(--k-sans);color:var(--k-ink-3);text-align:center}
  html.tw-web .tw-k-cell,
  html.tw-web .tw-k-slot{aspect-ratio:1;width:100%;border-radius:5px}
  html.tw-web .tw-k-slot{display:block}
  html.tw-web .tw-k-slot.is-future{box-shadow:inset 0 1px 3px rgba(30,34,39,.12);background:rgba(255,255,255,.18)}

  /* ── The clay scenes (web/clay.ts, founder 2026-09-25) ─────────────────────
     Shown whole, at their own 16:9, on the clay wall's cream until the still arrives.
     On a computer a scene takes the place of each of the app's films; the screens that
     centre their content keep the scene centred too. */
  html.tw-web video.tw-clay{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;background:#F1E9DC}
  html.tw-web #mv-doctor,
  html.tw-web #mv-express,
  html.tw-web #mv-space-ready,
  html.tw-web #mv-bridge,
  html.tw-web #mv-meet-asha{display:none !important}
  html.tw-web .tw-k-scene[hidden]{display:block !important;width:100%;max-width:720px;margin:12px 0 28px !important}
  html.tw-web #tw-k-space-ready-art[hidden],
  html.tw-web #tw-k-bridge-art[hidden],
  html.tw-web #tw-k-meet-asha-art[hidden]{margin:8px auto 24px !important}
  html.tw-web .tw-k-scene video{border-radius:16px;border:1px solid rgba(110,146,87,.18)}
  /* Inside the subscribed app: Calendar (beside "A year of days"), Me (Data and Support),
     Asha's first screen and Calm Space's welcome. */
  html.tw-web .tw-k-year-art video,
  html.tw-web #tw-k-me-art video,
  html.tw-web #tw-k-asha-art video{border-radius:16px;border:1px solid rgba(110,146,87,.18)}
  html.tw-web #tw-k-me-art[hidden]{display:block !important;margin:0 0 4px}
  html.tw-web #tw-k-asha-art[hidden]{display:block !important;width:100%;max-width:560px;margin:8px auto 20px;flex-shrink:0}
  html.tw-web #s-calm .calm-scene video.tw-clay{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;opacity:1}
  html.tw-web #s-calm:not([data-scene="arrive"]) .calm-scene video.tw-clay{display:none}
  /* "Ready when you are" centres its content, and with the scene and the site footer it is
     taller than the window, so plain centring pushed the scene's top up under the masthead,
     out of reach of any scroll. It centres only when everything fits; a browser without
     "safe" starts at the top. */
  html.tw-web #s-bridge > .scroll{justify-content:flex-start !important;justify-content:safe center !important}

  /* ── The front door (web/front-door.ts): before any agreement ─────────────
     Its own scrolling page below the masthead. The app beneath is inert while it shows.
     Urgent support stays above it in the masthead, and the opening animation starts below
     the masthead (z 75, under the masthead's 80 and the urgent panel's 81).
     The look (founder, 2026-09-25): the taluvu website's softer colours and serif, with
     the Aardvark site's confidence. Movement only under .tw-fd-motion, which front-door.ts
     never sets when reduced motion is asked for or after "Still"; without it every part of
     the page is simply there. */
  html.tw-web #tw-front:not([hidden]){
    --fd-cream:#F2EFE4; --fd-cream-2:#F6F2E9; --fd-glow:#D7EEDC; --fd-ink:#0D2E22; --fd-body:#1E4D3C;
    --fd-sub:#4F7264; --fd-jade:#3E8A6C; --fd-jade-2:#2B6F54; --fd-mint:#5BB68B; --fd-mint-2:#4FB180;
    --fd-amber:#E8A44A; --fd-amber-t:#FBE3C4; --fd-rule:#D7DBD0; --fd-app-deep:#26301F;
    --fd-italic:"Fraunces Italic Web",var(--k-serif);
    --fd-ease:cubic-bezier(.2,.8,.2,1);
    --fd-gutter:clamp(32px,4vw,56px);
    display:block;position:fixed;z-index:70;left:0;right:0;top:var(--tw-header-h);bottom:0;
    overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;scrollbar-color:rgba(13,46,34,.28) transparent;
    box-sizing:border-box;padding:0;background:var(--fd-cream);color:var(--fd-body);
    font:400 19px/1.6 var(--k-sans);
  }
  html.tw-web #tw-front button{font-family:var(--k-sans)}
  html.tw-web #tw-front button:focus-visible{outline:3px solid var(--k-focus);outline-offset:3px}
  html.tw-web .tw-fd-wrap{max-width:var(--tw-content-max);margin:0 auto;padding:0 var(--fd-gutter)}
  html.tw-web .tw-fd-band{padding:120px 0 0}

  /* The floating pills (as on the taluvu website) */
  html.tw-web .tw-fd-bar{
    position:sticky;top:14px;z-index:5;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;
    margin:0 0 -72px;padding:14px var(--fd-gutter) 0;pointer-events:none;
  }
  html.tw-web .tw-fd-bar > *{pointer-events:auto}
  html.tw-web .tw-fd-jump{
    min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--fd-rule);cursor:pointer;
    background:rgba(255,255,255,.88);color:var(--fd-jade-2);font:500 16px/1 var(--k-sans);
    box-shadow:0 8px 20px -14px rgba(13,46,34,.4);
  }
  html.tw-web .tw-fd-jump:hover{background:#fff}
  html.tw-web .tw-front-start.tw-fd-mint{
    min-height:44px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;
    background:var(--fd-mint);color:var(--fd-ink);font:600 16px/1 var(--k-sans);
    box-shadow:0 12px 24px -14px rgba(43,111,84,.7);
    transition:background-color var(--dur-press,140ms) var(--ease-out-strong,ease-out);
  }
  html.tw-web .tw-front-start.tw-fd-mint:hover{background:var(--fd-mint-2)}
  html.tw-web .tw-front-start.tw-fd-big{min-height:58px;padding:0 34px;font-size:18px}

  /* The first screen */
  html.tw-web .tw-fd-hero-band{
    padding:0;
    background:
      radial-gradient(1100px 720px at 100% 0%,var(--fd-glow) 0%,rgba(215,238,220,0) 62%),
      radial-gradient(760px 520px at 0% 100%,rgba(215,238,220,.55) 0%,rgba(215,238,220,0) 60%);
  }
  html.tw-web .tw-fd-hero{
    display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:40px 56px;align-items:center;
    min-height:calc(100dvh - var(--tw-header-h));padding-top:112px;padding-bottom:64px;
  }
  html.tw-web .tw-fd-eyebrow{margin:0 0 18px;font:600 16px/1.3 var(--k-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fd-jade-2)}
  html.tw-web .tw-front-h1{
    margin:0;font-family:var(--k-serif);font-weight:400;font-size:clamp(84px,8.6vw,148px);line-height:.96;
    letter-spacing:-.02em;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 0;color:var(--fd-ink);
  }
  html.tw-web .tw-front-h1 em{font-family:var(--fd-italic);font-style:italic;font-weight:400;color:var(--fd-jade);font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
  html.tw-web .tw-front-h1:focus{outline:none}
  html.tw-web .tw-front-h1:focus-visible{outline:3px solid var(--k-focus);outline-offset:6px}
  html.tw-web .tw-fd-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .14em;margin:0 -.06em -.14em}
  html.tw-web .tw-fd-wi{display:inline-block}
  html.tw-web .tw-fd-hero .tw-front-lede{margin:28px 0 0;max-width:30em;font:400 21px/1.6 var(--k-sans);color:var(--fd-body)}
  html.tw-web .tw-front-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}
  html.tw-web .tw-front-small{margin:14px 0 0;max-width:40em;font:400 17px/1.55 var(--k-sans);color:var(--fd-sub)}
  /* "Already a member? Sign in" (a build that sells memberships only). */
  html.tw-web .tw-fd-member{display:flex;align-items:center;flex-wrap:wrap;margin:4px 0 0;font:400 17px/1.55 var(--k-sans);color:var(--fd-sub)}
  html.tw-web .tw-fd-link{
    min-height:44px;padding:0 8px;margin:0 0 0 2px;border:0;background:none;cursor:pointer;
    color:var(--fd-jade-2);font:600 17px/1 var(--k-sans);text-decoration:underline;text-underline-offset:4px;
  }
  html.tw-web .tw-fd-link:hover{color:var(--fd-ink)}
  /* A membership sheet opened from the front door sits on the page (web/restore-sheet.ts),
     over the front door and under the masthead, so Urgent support stays above it. */
  html.tw-web body > #tw-restore,html.tw-web body > #tw-notice{top:var(--tw-header-h);z-index:76}
  html.tw-web .tw-fd-hero-art{position:relative;min-height:540px}
  html.tw-web .tw-fd-photo{
    position:absolute;left:6%;right:0;top:78px;margin:0;border-radius:28px;overflow:hidden;rotate:-1.2deg;
    border:1px solid rgba(255,255,255,.85);box-shadow:0 34px 64px -34px rgba(13,46,34,.5);
  }
  html.tw-web .tw-fd-pill{
    display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;white-space:nowrap;
    background:#fff;color:var(--fd-ink);font:600 16px/1 var(--k-sans);box-shadow:0 14px 28px -16px rgba(13,46,34,.4);
  }
  html.tw-web .tw-fd-dot{width:10px;height:10px;border-radius:50%;background:var(--fd-jade);flex:none}
  html.tw-web .tw-fd-pill-amber .tw-fd-dot{background:var(--fd-amber)}
  html.tw-web .tw-fd-pill-a{position:absolute;left:0;top:52px}
  html.tw-web .tw-fd-pill-b{position:absolute;right:-6px;bottom:96px}
  html.tw-web .tw-fd-float-asha{position:absolute;right:5%;top:0;width:clamp(96px,8vw,132px);height:auto;rotate:8deg;filter:drop-shadow(8px 16px 14px rgba(13,46,34,.22))}
  html.tw-web .tw-fd-float-check{
    position:absolute;left:-4%;bottom:12px;display:flex;flex-direction:column;gap:12px;padding:16px 20px;rotate:-4deg;
    border-radius:20px;background:rgba(255,255,255,.94);border:1px solid rgba(110,146,87,.24);box-shadow:0 22px 40px -24px rgba(13,46,34,.5);
  }
  html.tw-web .tw-fd-float-check-h{font:600 16px/1.2 var(--k-sans);color:var(--fd-app-deep)}
  html.tw-web .tw-fd-dots{display:flex;gap:10px}
  html.tw-web .tw-fd-mood-dot{display:block;border-radius:50%;box-shadow:0 2px 6px rgba(13,46,34,.16)}
  html.tw-web .tw-fd-dots-md .tw-fd-mood-dot{width:30px;height:30px}

  /* Section heads and type */
  html.tw-web .tw-fd-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 48px;margin-bottom:52px}
  html.tw-web .tw-fd-h2{
    margin:0;font-family:var(--k-serif);font-weight:400;font-size:clamp(56px,6vw,96px);line-height:.98;
    letter-spacing:-.02em;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 0;color:var(--fd-ink);
  }
  html.tw-web .tw-fd-lede{margin:0;max-width:32em;font:400 20px/1.6 var(--k-sans);color:var(--fd-body)}
  html.tw-web .tw-fd-h3{
    margin:18px 0 6px;font-family:var(--k-serif);font-weight:500;font-size:30px;line-height:1.1;
    font-variation-settings:"opsz" 48,"SOFT" 100,"WONK" 0;color:var(--fd-ink);
  }
  html.tw-web .tw-fd-aside{margin:12px 0 0;font-family:var(--fd-italic);font-style:italic;font-size:26px;line-height:1.3;color:var(--fd-jade);font-variation-settings:"opsz" 48,"SOFT" 100}
  html.tw-web .tw-fd-chips{display:flex;flex-wrap:wrap;gap:8px}
  html.tw-web .tw-fd-chip{
    display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
    background:rgba(255,255,255,.72);border:1px solid rgba(63,110,89,.16);font:400 16px/1.2 var(--k-sans);color:var(--fd-app-deep);
  }

  /* What's inside: the app's own clay pictures, set like book covers */
  html.tw-web .tw-fd-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
  html.tw-web .tw-fd-fcard{
    box-sizing:border-box;padding:14px 14px 22px;border-radius:24px;background:#fff;rotate:var(--tilt,0deg);
    border:1px solid rgba(110,146,87,.16);box-shadow:0 26px 44px -30px rgba(13,46,34,.45);
  }
  html.tw-web .tw-fd-fcard.is-feature{border:4px solid var(--fd-mint);padding:11px 11px 19px}
  html.tw-web .tw-fd-fcard-img{display:block;width:100%;aspect-ratio:16 / 10;object-fit:cover;border-radius:16px}
  html.tw-web .tw-fd-fcard .tw-fd-h3{margin:18px 8px 6px}
  html.tw-web .tw-fd-fcard p{margin:0 8px;font-size:18px;line-height:1.55;color:var(--fd-body)}
  html.tw-web .tw-fd-fcard .tw-fd-chips{margin:14px 8px 0}

  /* How it works: a soft mint panel and four cards in a fan */
  html.tw-web .tw-fd-band.tw-fd-how{margin:120px 16px 0;padding:88px 0 112px;border-radius:56px;background:var(--fd-glow)}
  html.tw-web .tw-fd-steps{display:flex;justify-content:center;flex-wrap:wrap;gap:28px 0;padding-top:20px}
  html.tw-web .tw-fd-step{
    position:relative;box-sizing:border-box;width:clamp(230px,21vw,290px);min-height:420px;margin:0 -8px;
    padding:22px 24px 28px;border-radius:26px;display:flex;flex-direction:column;gap:14px;
    box-shadow:0 28px 44px -28px rgba(13,46,34,.5);
  }
  html.tw-web .tw-fd-step-1{background:#fff;rotate:-4deg;--fan-x:260px;--fan-r:-14deg}
  html.tw-web .tw-fd-step-2{background:var(--fd-cream-2);rotate:2.5deg;translate:0 -14px;--fan-x:90px;--fan-r:-6deg}
  html.tw-web .tw-fd-step-3{background:var(--fd-amber-t);rotate:-2deg;--fan-x:-90px;--fan-r:6deg}
  html.tw-web .tw-fd-step-4{background:var(--fd-jade-2);color:var(--fd-cream);rotate:4deg;translate:0 -10px;--fan-x:-260px;--fan-r:14deg}
  html.tw-web .tw-fd-step-4 .tw-fd-h3{color:var(--fd-cream)}
  html.tw-web .tw-fd-step-n{margin:0;font-family:var(--fd-italic);font-style:italic;font-size:28px;line-height:1.1;color:var(--fd-jade);font-variation-settings:"opsz" 48,"SOFT" 100}
  html.tw-web .tw-fd-step-4 .tw-fd-step-n{color:var(--fd-glow)}
  html.tw-web .tw-fd-step .tw-fd-h3{margin:auto 0 0;font-size:28px}
  html.tw-web .tw-fd-step > p:last-child{margin:0;font-size:17px;line-height:1.5}
  html.tw-web .tw-fd-step .tw-fd-dots{padding:14px 0}
  html.tw-web .tw-fd-talk{display:flex;align-items:flex-end;gap:10px}
  html.tw-web .tw-fd-talk-asha{width:46px;height:auto;flex:none}
  html.tw-web .tw-fd-bubble{background:#fff;border-radius:18px 18px 18px 4px;padding:10px 14px;font:400 16px/1.4 var(--k-sans);color:var(--fd-ink);box-shadow:0 10px 20px -14px rgba(13,46,34,.45)}
  html.tw-web .tw-fd-mini-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
  html.tw-web .tw-fd-mini-day{aspect-ratio:1;border-radius:7px}
  html.tw-web .tw-fd-mini-day.is-plain{background:#fff;border:1px solid rgba(13,46,34,.12);box-sizing:border-box}
  html.tw-web .tw-fd-step .tw-fd-chips{margin-top:10px}
  html.tw-web .tw-fd-letter{display:grid;gap:8px;padding:16px;border-radius:10px;background:#fff;color:var(--fd-ink);font:600 16px/1.3 var(--k-sans);box-shadow:0 12px 22px -16px rgba(0,0,0,.6)}
  html.tw-web .tw-fd-letter span{padding-bottom:8px;border-bottom:1px solid rgba(110,146,87,.22)}
  html.tw-web .tw-fd-letter span:last-child{padding-bottom:0;border-bottom:0}

  /* Try a check-in: the app's own buttons, bigger for a big screen */
  html.tw-web .tw-fd-try .tw-fd-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 72px;align-items:center}
  html.tw-web .tw-fd-try-words .tw-fd-h2{margin-bottom:22px}
  html.tw-web .tw-fd-app{
    border-radius:24px;background:rgba(255,255,255,.88);border:1px solid rgba(110,146,87,.24);
    box-shadow:0 4px 16px rgba(30,100,80,.05),0 30px 52px -34px rgba(13,46,34,.45);
  }
  html.tw-web .tw-fd-app-sec{padding:26px 28px}
  html.tw-web .tw-fd-app-sec2{border-top:1px solid rgba(110,146,87,.18)}
  html.tw-web .tw-fd-app-h{margin:0 0 4px;font:500 20px/1.3 var(--k-sans);color:var(--fd-app-deep)}
  html.tw-web .tw-fd-app-sub{margin:0 0 14px;font:400 17px/1.5 var(--k-sans);color:var(--fd-sub)}
  html.tw-web .tw-fd-mood-row{display:flex;gap:6px;justify-content:space-between}
  html.tw-web .tw-fd-mood{
    flex:1;min-width:0;min-height:96px;padding:8px 0;border:0;border-radius:14px;background:none;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;
  }
  html.tw-web .tw-fd-mood .tw-fd-mood-dot{width:44px;height:44px;background:var(--c);box-shadow:0 3px 10px rgba(13,46,34,.18)}
  html.tw-web .tw-fd-mood[aria-pressed="true"] .tw-fd-mood-dot{width:52px;height:52px;outline:3px solid var(--fd-app-deep);outline-offset:3px;box-shadow:0 6px 16px rgba(13,46,34,.26)}
  html.tw-web .tw-fd-mood-w{font:400 16px/1.2 var(--k-sans);color:var(--fd-sub)}
  html.tw-web .tw-fd-mood[aria-pressed="true"] .tw-fd-mood-w{font-weight:600;color:var(--fd-app-deep)}
  html.tw-web .tw-fd-mood[aria-pressed="false"] .tw-fd-tick{display:none}
  html.tw-web .tw-fd-app-status{margin:12px 0 0;min-height:1.45em;font:400 16px/1.45 var(--k-sans);color:#46613A}
  html.tw-web .tw-fd-cap-row{display:flex;gap:8px}
  html.tw-web .tw-fd-cap{
    flex:1;min-width:0;min-height:78px;padding:10px 4px;border-radius:14px;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;
    border:1.5px solid rgba(110,146,87,.22);background:rgba(255,255,255,.7);color:var(--fd-sub);font:500 16px/1.35 var(--k-sans);
  }
  html.tw-web .tw-fd-cap-i{font-size:20px;line-height:1}
  html.tw-web .tw-fd-cap[aria-pressed="true"]{border-color:var(--cap-c);background:var(--cap-c);color:#06140F;font-weight:600;box-shadow:0 3px 10px rgba(30,100,80,.25)}
  html.tw-web .tw-fd-slip{display:flex;align-items:center;gap:12px;margin-top:16px}
  html.tw-web .tw-fd-slip-asha{width:44px;height:auto;flex:none}
  html.tw-web .tw-fd-slip .tw-fd-app-sub{margin:0}
  html.tw-web .tw-fd-slip.is-on .tw-fd-app-sub{color:var(--fd-app-deep)}

  /* Your month, laid out: the app's calendar style, an example month */
  html.tw-web .tw-fd-month-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 72px;align-items:center;width:100%}
  html.tw-web .tw-fd-month-words .tw-fd-h2{margin-bottom:22px}
  html.tw-web .tw-fd-month-words > p:not(.tw-fd-eyebrow){margin:0 0 14px;max-width:32em;color:var(--fd-body)}
  html.tw-web .tw-fd-legend{margin-top:20px}
  html.tw-web .tw-fd-cal{
    padding:24px 26px;border-radius:26px;background:linear-gradient(180deg,#fff,#F6FBF7);
    border:1px solid rgba(110,146,87,.22);box-shadow:0 30px 52px -34px rgba(13,46,34,.45);
  }
  html.tw-web .tw-fd-cal-h{margin:0 0 14px;text-align:center;font:500 20px/1.2 var(--k-sans);color:var(--fd-app-deep)}
  html.tw-web .tw-fd-cal-wd,
  html.tw-web .tw-fd-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
  html.tw-web .tw-fd-cal-wd{margin-bottom:8px;text-align:center;font:500 16px/1 var(--k-sans);color:var(--fd-sub)}
  html.tw-web .tw-fd-day{
    position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;aspect-ratio:1;border-radius:12px;
    display:flex;flex-direction:column;justify-content:space-between;padding:6px 6px 5px;
    background:rgba(255,255,255,.6);border:1px solid rgba(13,46,34,.06);color:var(--fd-sub);font:500 16px/1 var(--k-sans);
  }
  html.tw-web .tw-fd-day.is-blank{background:none;border:0}
  html.tw-web .tw-fd-day.is-rated::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--c);opacity:0;scale:.55}
  html.tw-web .tw-fd-day.is-rated.is-on::before{opacity:1;scale:1}
  html.tw-web .tw-fd-day.is-rated.is-on{color:#06140F;border-color:rgba(0,0,0,.08)}
  html.tw-web .tw-fd-day.is-noted.is-on{background:#fff;border-color:rgba(13,46,34,.2);color:var(--fd-app-deep)}
  html.tw-web .tw-fd-day-top{display:flex;justify-content:space-between;align-items:center;gap:2px}
  html.tw-web .tw-fd-day-n{font-weight:600}
  html.tw-web .tw-fd-day-mk,
  html.tw-web .tw-fd-day-bt{font-size:14px;line-height:1}
  html.tw-web .tw-fd-day-bt{text-align:right;min-height:14px}
  html.tw-web .tw-fd-day:not(.is-on) .tw-fd-day-mk,
  html.tw-web .tw-fd-day:not(.is-on) .tw-fd-day-bt{opacity:0}
  html.tw-web .tw-fd-cal-sh{margin:22px 0 10px;font:600 16px/1 var(--k-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--fd-app-deep)}
  html.tw-web .tw-fd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  html.tw-web .tw-fd-stat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:14px;background:#fff;border:1px solid rgba(110,146,87,.18);text-align:center}
  html.tw-web .tw-fd-stat-n{font:600 26px/1 var(--k-sans);color:var(--fd-app-deep);font-variant-numeric:tabular-nums}
  html.tw-web .tw-fd-stat-l{font:400 16px/1.25 var(--k-sans);color:var(--fd-sub)}

  /* Made for living with */
  html.tw-web .tw-fd-band.tw-fd-living{position:relative;overflow:hidden;margin:120px 16px 0;padding:96px 0 104px;border-radius:56px;background:var(--fd-jade-2);color:var(--fd-cream);text-align:center}
  html.tw-web .tw-fd-kicker-lg{margin:0 0 20px;font-family:var(--fd-italic);font-style:italic;font-size:34px;line-height:1.2;color:var(--fd-glow);font-variation-settings:"opsz" 48,"SOFT" 100}
  html.tw-web .tw-fd-words{list-style:none;margin:0;padding:0}
  html.tw-web .tw-fd-word{
    white-space:nowrap;font-family:var(--k-serif);font-weight:400;font-size:clamp(60px,7.4vw,120px);line-height:1.04;
    letter-spacing:-.02em;color:var(--fd-cream);font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 0;
  }
  html.tw-web .tw-fd-word.is-accent{font-family:var(--fd-italic);font-style:italic;color:var(--fd-glow);font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
  html.tw-web .tw-fd-living-asha{position:absolute;right:7%;top:12%;width:clamp(90px,8vw,130px);height:auto;rotate:10deg;filter:drop-shadow(8px 16px 14px rgba(0,0,0,.25))}

  /* Harder days, and Kept here */
  html.tw-web .tw-fd-split .tw-fd-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 72px;align-items:center}
  html.tw-web .tw-fd-split-rev .tw-fd-wrap{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  html.tw-web .tw-fd-split-words .tw-fd-h2{margin-bottom:22px;font-size:clamp(48px,4.6vw,76px)}
  html.tw-web .tw-fd-split-words p{margin:0 0 14px;max-width:34em;color:var(--fd-body)}
  html.tw-web .tw-fd-split-words .tw-front-small{color:var(--fd-sub)}
  html.tw-web .tw-fd-split-art{position:relative}
  html.tw-web .tw-fd-split-img{display:block;width:100%;aspect-ratio:16 / 10;object-fit:cover;border-radius:28px;box-shadow:0 30px 60px -34px rgba(13,46,34,.5)}
  html.tw-web .tw-fd-stickers{position:absolute;inset:0;pointer-events:none}
  html.tw-web .tw-fd-sticker{position:absolute}
  html.tw-web .tw-fd-sticker-1{left:-5%;top:8%;rotate:-6deg}
  html.tw-web .tw-fd-sticker-2{right:-4%;top:26%;rotate:5deg}
  html.tw-web .tw-fd-sticker-3{left:4%;bottom:10%;rotate:3deg}
  html.tw-web .tw-fd-sticker-4{right:2%;bottom:-5%;rotate:-4deg}

  /* What it costs */
  html.tw-web .tw-fd-cost-panel{
    display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:start;padding:64px;
    border-radius:40px;background:#fff;border:1px solid rgba(110,146,87,.18);box-shadow:0 30px 60px -44px rgba(13,46,34,.5);
  }
  html.tw-web .tw-fd-cost .tw-fd-lede{margin:18px 0 28px}
  html.tw-web .tw-fd-free .tw-fd-h3{margin-top:6px}
  html.tw-web .tw-fd-free-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px;color:var(--fd-body)}
  html.tw-web .tw-fd-free-list li{position:relative;padding-left:32px}
  html.tw-web .tw-fd-free-list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--fd-jade-2);font-weight:700}

  /* A line that travels as you scroll */
  html.tw-web .tw-fd-marquee{overflow:hidden;padding:110px 0 20px}
  html.tw-web .tw-fd-marquee-track{
    display:flex;gap:.35em;white-space:nowrap;font-family:var(--fd-italic);font-style:italic;font-weight:400;
    font-size:clamp(88px,10vw,168px);line-height:1.1;color:var(--fd-ink);font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;
  }
  html.tw-web .tw-fd-marquee-dot{color:var(--fd-mint)}

  /* What it is, and is not; the footer */
  html.tw-web .tw-fd-band.tw-fd-isnt{padding-top:64px}
  html.tw-web .tw-fd-isnt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  html.tw-web .tw-fd-isnt p{
    margin:0;padding-top:20px;border-top:1px solid var(--fd-rule);font-family:var(--k-serif);font-weight:400;
    font-size:30px;line-height:1.3;color:var(--fd-ink);font-variation-settings:"opsz" 36,"SOFT" 100,"WONK" 0;
  }
  html.tw-web .tw-front-foot{margin-top:96px;padding:32px 0 56px;border-top:1px solid var(--fd-rule);font:400 17px/1.5 var(--k-sans);color:var(--fd-sub)}
  html.tw-web .tw-fd-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
  html.tw-web .tw-fd-foot p{margin:0;flex:1 1 auto}
  html.tw-web .tw-front-foot .juntoh-wordmark{font-size:26px}
  html.tw-web .tw-front-foot-links{display:flex;gap:24px}
  html.tw-web .tw-front-foot .tw-legal-link{
    min-height:44px;padding:0;border:0;background:transparent;cursor:pointer;
    font:500 17px/1 var(--k-sans);color:var(--fd-jade-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  }

  /* The opening: below the masthead, never over Urgent support */
  html.tw-web .tw-fd-intro{position:fixed;z-index:75;left:0;right:0;top:var(--tw-header-h);bottom:0;cursor:pointer}
  html.tw-web .tw-fd-intro svg{display:block;width:100%;height:100%}
  html.tw-web .tw-fd-intro-mark{
    position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;box-sizing:border-box;
    border-radius:50%;border:3px solid rgba(242,239,228,.9);display:flex;align-items:center;justify-content:center;opacity:0;
  }
  html.tw-web .tw-fd-intro-mark img{width:118px;height:auto}
  html.tw-web .tw-fd-intro-skip{
    position:absolute;right:24px;bottom:24px;min-height:44px;padding:0 18px;border-radius:999px;cursor:pointer;
    border:1.5px solid rgba(242,239,228,.7);background:transparent;color:var(--fd-cream);font:600 16px/1 var(--k-sans);
  }

  /* Movement, only under .tw-fd-motion */
  html.tw-web #tw-front.tw-fd-motion .tw-fd-in{transition:opacity .7s var(--fd-ease),translate .9s var(--fd-ease),scale .9s var(--fd-ease);transition-delay:calc(var(--i,0) * 80ms)}
  html.tw-web #tw-front.tw-fd-motion .tw-fd-hero.is-pre .tw-fd-in{opacity:0;translate:0 28px;scale:.96}
  html.tw-web #tw-front.tw-fd-motion .tw-fd-wi{transition:translate .85s var(--fd-ease),rotate .85s var(--fd-ease),opacity .6s ease;transition-delay:calc(var(--i,0) * 90ms)}
  html.tw-web #tw-front.tw-fd-motion .tw-fd-hero.is-pre .tw-fd-wi{translate:0 110%;rotate:5deg;opacity:0}
  html.tw-web #tw-front.tw-fd-motion [data-fd-rv]{transition:opacity .7s var(--fd-ease),translate .9s var(--fd-ease),rotate .9s var(--fd-ease),scale .7s var(--fd-ease);transition-delay:calc(var(--i,0) * 90ms)}
  html.tw-web #tw-front.tw-fd-motion [data-fd-rv="rise"]:not(.is-in){opacity:0;translate:0 64px}
  html.tw-web #tw-front.tw-fd-motion .tw-fd-fcard[data-fd-rv]:not(.is-in){translate:0 140px;rotate:calc(var(--tilt,0deg) * -4)}
  html.tw-web #tw-front.tw-fd-motion [data-fd-rv="fan"]:not(.is-in){opacity:0;translate:var(--fan-x,0) 160px;rotate:var(--fan-r,0deg)}
  html.tw-web #tw-front.tw-fd-motion [data-fd-rv="pop"]:not(.is-in){opacity:0;scale:.2;rotate:-18deg}
  html.tw-web #tw-front.tw-fd-motion .tw-fd-day.is-rated::before{transition:opacity .35s ease,scale .45s var(--fd-ease)}
  html.tw-web #tw-front.tw-fd-motion .tw-fd-day-mk,
  html.tw-web #tw-front.tw-fd-motion .tw-fd-day-bt{transition:opacity .3s ease}
  html.tw-web #tw-front.tw-fd-motion .tw-fd-band.tw-fd-month{height:calc((100dvh - var(--tw-header-h)) * 2.3);padding-top:0}
  html.tw-web #tw-front.tw-fd-motion .tw-fd-month-stage{position:sticky;top:0;height:calc(100dvh - var(--tw-header-h));display:flex;align-items:center}
  html.tw-web #tw-front.tw-fd-motion [data-fd-hero],
  html.tw-web #tw-front.tw-fd-motion .tw-fd-word,
  html.tw-web #tw-front.tw-fd-motion .tw-fd-marquee-track{will-change:transform}
  html.tw-web #tw-front .tw-fd-mood-dot,
  html.tw-web #tw-front .tw-fd-cap{transition:background-color var(--dur-press,140ms) ease,border-color var(--dur-press,140ms) ease}

  /* ── Symptoms: today's low-friction check-in beside the longer view ───── */
  html.tw-web #s-story > .scroll{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:max-content;
    align-content:start;gap:16px 32px;
  }
  html.tw-web #s-story > .scroll > div:first-child{grid-column:1 / 8;grid-row:1}
  html.tw-web #ash-explain-story{grid-column:8 / -1;grid-row:1 / 3;margin:0}
  html.tw-web #s-story > .scroll > button{grid-column:1 / 8;grid-row:2;justify-self:start}
  html.tw-web #s-story > .scroll > div:nth-child(4){grid-column:1 / 8;grid-row:3}
  html.tw-web #home-body-card{grid-column:1 / 8;grid-row:4 / 7;margin:0 !important}
  html.tw-web #s-story > .scroll > div:nth-child(6){grid-column:8 / -1;grid-row:3}
  html.tw-web #shv-trends{grid-column:8 / -1;grid-row:4 / 7;margin:0 !important}
  html.tw-web #sym-track-door{grid-column:1 / -1;grid-row:7;margin-top:18px !important}
  html.tw-web #sym-track-wrap{grid-column:1 / -1;grid-row:8}

  /* ── Asha's notes: a slip of paper, in her own voice ─────────────────────
     The app's "Asha tips and guides" card, on every page that has one. */
  html.tw-web #app .ash-explain{
    box-sizing:border-box;align-self:start;
    padding:20px 22px !important;
    background:var(--k-slip) !important;border:1px solid var(--k-rule) !important;border-radius:2px !important;
    box-shadow:var(--k-sh-slip) !important;
  }
  html.tw-web #app .ash-explain-face,
  html.tw-web #app .ash-explain-face img{width:48px !important;height:48px !important}
  html.tw-web #app .ash-explain-who{font:500 16px/1.4 var(--k-sans) !important;letter-spacing:0 !important;text-transform:none !important;color:var(--k-ink-3) !important}
  html.tw-web #app .ash-explain-text{
    font-family:var(--k-serif) !important;font-weight:420 !important;font-size:19px !important;line-height:1.5 !important;
    font-variation-settings:"opsz" 18,"SOFT" 100,"WONK" 0;color:var(--k-ink) !important;
  }
  /* Until the person acts, her tip glows (web/tip-glow.ts; founder, 2026-09-29). A ring
     drawn OUTSIDE the card, so nothing moves, resizes or shifts. Its resting state is a
     still ring: Stop animation (html.tw-still, below) ends the pulse there. */
  html.tw-web #app .ash-explain.tw-tip-glow{position:relative}
  html.tw-web #app .ash-explain.tw-tip-glow::after{
    content:"";position:absolute;inset:-5px;border-radius:6px;pointer-events:none;
    box-shadow:0 0 0 2px var(--k-link),0 0 18px 4px rgba(70,100,63,.28);
    animation:tw-tip-glow 2.4s ease-in-out infinite;
  }
  @keyframes tw-tip-glow{
    0%,100%{box-shadow:0 0 0 2px var(--k-link),0 0 18px 4px rgba(70,100,63,.28)}
    50%{box-shadow:0 0 0 3px var(--k-link),0 0 34px 12px rgba(70,100,63,.45)}
  }

  /* ── Journal: a writing desk, the pages on the left, the margin on the right ── */
  html.tw-web #s-journal > .scroll{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:max-content;
    align-content:start;gap:16px 32px;
  }
  html.tw-web #s-journal > .scroll > *{grid-column:1 / 9}
  html.tw-web #j-date-label{grid-row:1;font:500 16px/1.4 var(--k-sans) !important;letter-spacing:.01em !important;text-transform:none !important;color:var(--k-ink-3) !important}
  html.tw-web #j-header{grid-row:2;margin:0 0 4px !important;font-size:clamp(40px,3.6vw,52px) !important}
  html.tw-web #j-help-toggle{grid-row:3;justify-self:start;font:500 17px/1 var(--k-sans) !important;color:var(--k-link) !important;text-decoration:underline;text-underline-offset:5px}
  html.tw-web #j-prompts{grid-row:4}
  html.tw-web #s-journal > .scroll > .btn-p{
    grid-row:5;justify-self:start;width:auto !important;min-height:56px;padding:0 32px !important;margin:0 !important;
    background:var(--k-bottle) !important;color:var(--k-paper) !important;border-radius:18px !important;box-shadow:none !important;
    font:600 18px/1 var(--k-sans) !important;
  }
  html.tw-web #j-confirmation{grid-row:6}
  html.tw-web #s-journal > .scroll > .lbl{grid-row:7;margin-top:24px !important;font:500 16px/1.4 var(--k-sans) !important;letter-spacing:.01em !important;text-transform:none !important;color:var(--k-ink-3) !important}
  html.tw-web #j-search-wrap{grid-row:8}
  html.tw-web #j-search{min-height:48px;font:400 18px/1.4 var(--k-sans) !important;background:var(--k-paper) !important;border:1px solid var(--k-rule-strong) !important;border-radius:2px !important}
  html.tw-web #j-entries,
  html.tw-web #j-entries-empty{grid-row:9}
  /* The margin: Asha's note, the voice note and the desk, beside the pages. */
  html.tw-web #ash-explain-journal{grid-column:9 / 13 !important;grid-row:1 / 5;margin:0 !important}
  html.tw-web #voice-checkin-card{
    grid-column:9 / 13 !important;grid-row:5 / 9;align-self:start;margin:0 !important;padding:20px 22px !important;
    background:var(--k-slip) !important;border:1px solid var(--k-rule) !important;border-radius:2px !important;box-shadow:var(--k-sh-slip) !important;
  }
  html.tw-web #voice-checkin-card p{font-size:16px !important;line-height:1.5 !important;color:var(--k-ink-3) !important}
  html.tw-web #mv-journal{display:none !important}
  html.tw-web #tw-k-journal-art[hidden]{
    display:block !important;grid-column:9 / 13 !important;grid-row:9;align-self:start;
    position:sticky;top:24px;margin:0 !important;
  }
  html.tw-web #tw-k-journal-art video.tw-clay{aspect-ratio:1;object-position:42% 50%;border-radius:2px}
  /* Each entry is a sheet of paper; months head their stack like a book's chapters. */
  html.tw-web #j-entries > div:not(.j-card){
    margin:28px 0 12px !important;
    font-family:var(--k-serif) !important;font-weight:470 !important;font-size:24px !important;line-height:1.2 !important;
    font-variation-settings:"opsz" 24,"SOFT" 100,"WONK" 0;letter-spacing:0 !important;text-transform:none !important;color:var(--k-ink) !important;
  }
  html.tw-web #j-entries .j-card{
    margin:0 0 14px !important;padding:22px 28px !important;
    background:var(--k-paper) !important;border:1px solid var(--k-rule) !important;border-radius:2px !important;
    box-shadow:var(--k-sh-slip) !important;
  }
  html.tw-web #j-entries .j-card > div:first-child > span{font:500 16px/1.4 var(--k-sans) !important;color:var(--k-ink-3) !important}
  html.tw-web #j-entries .j-card > p{max-width:66ch;margin-top:8px !important;font:400 19px/1.6 var(--k-sans) !important;color:var(--k-ink) !important}
  html.tw-web #j-entries .j-card > div:not(:first-child),
  html.tw-web #j-entries .j-card > div:not(:first-child) span{font-size:16px !important;line-height:1.5 !important}
  html.tw-web #j-entries .j-card button:not(.j-del-btn){
    min-height:44px;padding:0 18px !important;margin-top:10px;
    background:transparent !important;border:1.5px solid var(--k-bottle) !important;border-radius:16px !important;color:var(--k-bottle) !important;
    font:600 16px/1 var(--k-sans) !important;
  }
  html.tw-web #j-entries .j-del-btn{min-width:44px;min-height:44px}

  /* ── Me: four authored groups, not one long mobile stack ──────────────── */
  html.tw-web #s-me > .scroll{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:max-content;
    align-content:start;gap:18px 32px;
  }
  html.tw-web #s-me > .scroll > h1{grid-column:1 / 8;grid-row:1;margin:0 !important}
  html.tw-web #ash-explain-me{grid-column:8 / -1;grid-row:1 / 3;margin:0}
  html.tw-web #s-me > .scroll > div:nth-child(4){grid-column:1 / 8;grid-row:2;margin:0 !important}
  html.tw-web #me-backup-reminder{grid-column:1 / -1}
  html.tw-web #s-me .me-sec{grid-column:span 6;margin:8px 0 0}
  html.tw-web #s-me .me-sec-h{border-bottom:1px solid var(--k-rule);border-radius:0;margin-bottom:12px}
  html.tw-web #s-me .me-sec-body{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}

  /* ── Asha: correspondence at a readable measure ───────────────────────── */
  html.tw-web #s-asha .chat-area{
    box-sizing:border-box;
    width:100% !important;
    padding-right:max(32px,calc((100% - 760px) / 2)) !important;
    padding-left:max(32px,calc((100% - 760px) / 2)) !important;
  }
  html.tw-web #s-asha .asha-foot{
    left:auto !important;right:auto !important;
    width:min(760px,calc(100% - 64px)) !important;
    margin-right:auto !important;margin-left:auto !important;
    border-radius:18px 18px 0 0;
  }
  html.tw-web #s-asha #asha-medical-notice,
  html.tw-web #s-asha #asha-crisis-notice,
  html.tw-web #s-asha #asha-urgent-notice{
    left:50% !important;right:auto !important;top:20px !important;
    width:min(760px,calc(100% - 64px)) !important;
    box-sizing:border-box;
    transform:translateX(-50%);
  }

  /* Secondary information pages keep a generous but readable measure. */
  html.tw-web #s-me-privacy-support > .scroll > *,
  html.tw-web #care-book-scroll > *,
  html.tw-web #meds-scroll > *,
  html.tw-web #s-condition-hub > .scroll > *,
  html.tw-web #me-backup-scroll > *{max-width:980px;margin-right:auto !important;margin-left:auto !important}
  html.tw-web #legal-doc-scroll > *,
  html.tw-web #legal-terms-scroll > *{max-width:var(--tw-reading);margin-right:auto !important;margin-left:auto !important}
  html.tw-web #legal-doc-body,
  html.tw-web #terms-body{font-size:17px;line-height:1.68}
}

@media (min-width:1024px) and (max-width:1279px){
  html.tw-web .tw-k-shelf-tiles{grid-template-columns:repeat(7,68px);gap:14px;background-position:0 74px}
  html.tw-web .tw-k-tile{width:68px;height:68px}
  html.tw-web .tw-k-trays{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:1024px) and (max-width:1180px){
  html.tw-web{--tw-content-max:960px}
  html.tw-web.tw-rail-on #tw-rail,
  html.tw-web.tw-brand-on #tw-rail{column-gap:16px;padding-inline:24px}
  html.tw-web #tw-rail .tw-brand .juntoh-wordmark{font-size:26px}
  html.tw-web #tw-rail .tw-item{padding-inline:8px;font-size:16px}
  html.tw-web #tw-rail .tw-checkin{padding-inline:16px;font-size:16px}
  html.tw-web #tw-rail .tw-urgent{padding-inline:14px;font-size:16px}
  html.tw-web .tw-k-choice{font-size:17px}
}

@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  html.tw-web #tw-rail nav:not([data-tw-quiet="true"]) .tw-item:not([aria-current="page"]):hover{background:rgba(30,34,39,.05);color:var(--k-ink)}
  html.tw-web #tw-rail .tw-checkin:hover{background:var(--k-bottle-press)}
  html.tw-web #tw-rail .tw-urgent:hover{background:rgba(30,34,39,.06)}
  html.tw-web .tw-k-choice:hover{background:rgba(30,34,39,.045)}
  html.tw-web .tw-k-tile:hover,
  html.tw-web .tw-k-cell:hover{filter:brightness(1.05)}
  html.tw-web .tw-k-footer .tw-legal-link:hover{color:var(--k-ink)}
}

@media (min-width:501px) and (max-width:820px){
  html.tw-web #app .scroll{padding-right:22px !important;padding-left:22px !important}
  html.tw-web .tw-urgent-inner{grid-template-columns:minmax(0,1fr)}
}

@media (min-width:501px) and (prefers-reduced-motion:reduce){
  html.tw-web #tw-rail .tw-item,
  html.tw-web #tw-rail .tw-checkin,
  html.tw-web #tw-rail .tw-urgent,
  html.tw-web .tw-k-choice,
  html.tw-web .tw-k-tile,
  html.tw-web .tw-k-cell{transition:none}
  html.tw-web #tw-front *,
  html.tw-web #tw-front *::before{transition:none !important}
}

/* ── Calm Space: a sharp window onto the scene (founder, 2026-09-29: "too large so they
   spill over the screen and low resolution") ─────────────────────────────────────────
   The films are phone-shaped, 480x854. Filling a wide window blew one up about three
   times and cropped most of it away. On a wide screen the film is a portrait window at no
   more than its own size, centred, with the same scene softly blurred around it so the
   room still feels like the shore, the park or the lantern. The arrive screen keeps its
   own clay scene (see the Calm Space rules above). qa/scripts/verify-web-calm-space.mjs. */
@media (min-width:501px){
  html.tw-web #s-calm:not([data-scene="arrive"]) .calm-scene{background:#20301F;container-type:size}
  html.tw-web #s-calm:not([data-scene="arrive"]) .calm-scene::before{
    content:"";position:absolute;inset:-80px;
    background:center / cover no-repeat;
    filter:blur(48px) brightness(.62) saturate(1.05);
  }
  html.tw-web #s-calm[data-scene="shore"] .calm-scene::before{background-image:url("../asha-videos/calm-shore-poster.webp?v=11")}
  html.tw-web #s-calm[data-scene="park"] .calm-scene::before{background-image:url("../asha-videos/calm-park-poster.webp?v=12")}
  html.tw-web #s-calm[data-scene="lantern"] .calm-scene::before{background-image:url("../asha-videos/calm-lantern-poster.webp?v=7")}
  html.tw-web #s-calm:not([data-scene="arrive"]) #calm-video{
    inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
    height:min(calc(100cqh - 40px),854px,calc((100cqw - 40px) * 854 / 480));width:auto;aspect-ratio:480 / 854;
    border-radius:20px;box-shadow:0 24px 70px rgba(6,12,6,.5);
  }
  /* The top buttons sit with the picture, not out at the far edges of the page. */
  html.tw-web #s-calm:not([data-scene="arrive"]) .calm-top{left:50%;right:auto;width:min(560px,calc(100% - 28px));transform:translateX(-50%)}
}

/* ── First-visit notices ("Your journal", "Your trends"...): a small centred card, not a
   banner across the page (founder, 2026-09-29). Words at body size; the close button
   keeps its 44px. On a phone they are unchanged. qa/scripts/verify-web-notices.mjs. */
@media (min-width:501px){
  html.tw-web .ftt-wrap{left:50% !important;right:auto !important;transform:translateX(-50%);width:min(460px,calc(100% - 40px));padding:0 !important}
  html.tw-web .ftt{border-radius:20px;padding:16px 52px;text-align:center}
  html.tw-web .ftt h4{font-size:16px;line-height:1.35;margin-bottom:4px}
  html.tw-web .ftt p{font-size:16px;line-height:1.45;color:rgba(222,244,234,.88)}
  html.tw-web .ftt-arrow{display:none}
}
@media (min-width:1024px){
  html.tw-web .ftt-wrap{bottom:32px}
}

/* Stop animation (founder, 2026-09-25): while stopped, every CSS movement on the website
   jumps straight to its end, so nothing is left half drawn and nothing loops. Pictures
   that play are paused by web/motion.ts. The class is only ever set from 1024px, and the
   rule sits behind 501px like every rule in this file, so phones are untouched. */
@media (min-width:501px){
  html.tw-web.tw-still *,
  html.tw-web.tw-still *::before,
  html.tw-web.tw-still *::after{
    animation-duration:1ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;
    transition-duration:1ms !important;transition-delay:0s !important;scroll-behavior:auto !important;
  }
}

/* ── The membership sheets on a computer (web/restore-sheet.ts) ──────────────────
   "Welcome back" and its notices were drawn for a phone, at 13 to 15px. From 501px they
   read at body size, and nothing a person needs is below 16px. Phones are untouched. */
@media (min-width:501px){
  html.tw-web #tw-restore .tw-body,html.tw-web #tw-notice .tw-body{max-width:640px;padding:32px 24px 24px}
  html.tw-web #tw-restore .tw-label,html.tw-web #tw-notice .tw-label{font-size:14px}
  html.tw-web #tw-restore .tw-close,html.tw-web #tw-notice .tw-close,
  html.tw-web #tw-restore .tw-go,html.tw-web #tw-notice .tw-go{font-size:17px}
  html.tw-web #tw-restore .tw-h,html.tw-web #tw-notice .tw-h{font-size:32px;line-height:1.25;margin-bottom:14px}
  html.tw-web #tw-restore .tw-p,html.tw-web #tw-notice .tw-p{font-size:19px;line-height:1.6;font-weight:400;max-width:34em}
  html.tw-web #tw-restore .tw-field-label{font-size:17px}
  html.tw-web #tw-restore .tw-input{font-size:19px;min-height:60px}
  html.tw-web #tw-restore .tw-msg{font-size:17px;line-height:1.5}
  html.tw-web #tw-restore .tw-note{font-size:17px;line-height:1.6;font-weight:400}
  html.tw-web #tw-notice .tw-ok{font-size:18px}
}