/* Mamori homepage v2: washi paper, sumi ink, shu vermilion.
   Fonts: Shippori Mincho B1, Yuji Syuku, Zen Kaku Gothic New (SIL OFL), self-hosted subsets. */

/* Fonts: Zen Kaku 400/500/700 (body) and Shippori 800 (headings) are preloaded in the page head; a tiny head script
   keeps the nav and hero unpainted until they are ready (at most 900 ms), so the first frame already uses them and
   nothing reflows when they arrive. Shippori 500 (phrase demo) and Yuji (brush kanji, fixed-size boxes) swap.
   Every subset has 0-9 and all ASCII punctuation; numbers in body text use the body font. */
@font-face { font-family: "Shippori"; src: url(fonts/shippori-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Shippori"; src: url(fonts/shippori-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Yuji"; src: url(fonts/yuji.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ZenKaku"; src: url(fonts/zenkaku-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ZenKaku"; src: url(fonts/zenkaku-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "ZenKaku"; src: url(fonts/zenkaku-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
/* fonts gate (see the head script) */
.fl .nav .wrap, .fl .hero .wrap { visibility: hidden; }

:root {
  --paper: #f2eadb;
  --paper-2: #e8dcc6;
  --paper-3: #fbf6ec;
  --ink: #1c1714;
  --ink-2: #463d36;
  --ink-3: #6a5f55;
  --shu: #c3371f;
  --shu-deep: #9c2814;
  --shu-soft: #e9b7a6;
  --pouch: #b8321d;
  --pouch-line: #8f2412;
  --gold: #b48a46;
  --cord: #efe1bf;
  --cord-shade: #b89a62;
  --line: rgba(28, 23, 20, 0.14);
  --line-strong: rgba(28, 23, 20, 0.32);
  --focus: #1c1714;
  --on-ink: #f6efe2;
  --mk-out: var(--paper-3);
  --mk-in: var(--ink);
  --mk-tor: var(--paper-3);

  --f-display: "Shippori", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-brush: "Yuji", "Shippori", serif;
  --f-body: "ZenKaku", "Hiragino Sans", "Yu Gothic", sans-serif;

  --max: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r-ctl: 10px;
  --r-panel: 16px;
  --tone-1: rgba(60, 30, 12, 0.22);
  --tone-2: rgba(246, 239, 226, 0.18);
  --tone-3: rgba(40, 20, 8, 0.45);
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .06' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .24 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23f)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--shu); color: var(--on-ink); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--shu-deep); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; transition: none; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.08; margin: 0; letter-spacing: -0.01em; overflow-wrap: break-word; min-width: 0; text-wrap: balance; color: var(--ink); }
p { margin: 0 0 1em; text-wrap: pretty; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--on-ink); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- logo ---------- */
.sh-out { fill: var(--mk-out); }
.sh-in { fill: var(--mk-in); }
.tor { stroke: var(--mk-tor); stroke-linecap: round; fill: none; }
.num { font-variant-numeric: lining-nums; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 32px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--f-display); font-weight: 800; font-size: 1.375rem; letter-spacing: 0; }
.brand svg { width: 30px; height: 34px; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0 0 0 auto; padding: 0; font-size: 0.9375rem; }
.nav ul a { text-decoration: none; color: var(--ink-2); padding: 8px 0; }
.nav ul a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: var(--r-ctl); font: 500 1rem/1 var(--f-body); text-decoration: none; border: 1px solid var(--ink); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn:active { transform: scale(0.98); }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { background: var(--shu-deep); border-color: var(--shu-deep); color: var(--on-ink); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--paper-3); color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .st { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- hero ---------- */
/* one centred column at every width. Desktop order: charm, status, H1, lede, buttons, trial note, charm note.
   The charm is sized from the viewport height so charm, H1 and both buttons fit the first screen (capped on big screens). */
.hero { position: relative; overflow: hidden; --cw: clamp(150px, 23.5svh, 236px); }
.hero .wrap { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: clamp(20px, 3.5svh, 44px); padding-bottom: clamp(56px, 9svh, 112px); }
.hero .hero-text, .hero .charm-stage { display: contents; }
/* a faint seigaiha band behind the charm, fading out to the sides */
.hero::before { content: ""; position: absolute; left: 0; right: 0; top: calc(clamp(20px, 3.5svh, 44px) + var(--cw) * .5); height: calc(var(--cw) * 1.05);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cg fill='none' stroke='%23b48a46' stroke-width='1'%3E%3Ccircle cx='0' cy='12' r='21'/%3E%3Ccircle cx='0' cy='12' r='14'/%3E%3Ccircle cx='0' cy='12' r='7'/%3E%3Ccircle cx='48' cy='12' r='21'/%3E%3Ccircle cx='48' cy='12' r='14'/%3E%3Ccircle cx='48' cy='12' r='7'/%3E%3Ccircle cx='24' cy='24' r='21'/%3E%3Ccircle cx='24' cy='24' r='14'/%3E%3Ccircle cx='24' cy='24' r='7'/%3E%3C/g%3E%3C/svg%3E") 50% 0 / 48px 24px;
  opacity: .22; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 34% 50% at 50% 50%, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 34% 50% at 50% 50%, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%); }
.hero h1 { font-size: clamp(2.5rem, min(5.4vw, 8.4svh), 5rem); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.hero .lede { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--ink-2); line-height: 1.55; text-wrap: balance; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.fine { font-size: 0.9375rem; color: var(--ink-3); margin-top: 16px; }

.charm-stage { position: relative; display: grid; justify-items: center; }
/* the charm is the toggle: one button, the whole charm is the tap target */
.charm-btn { display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 14px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .35s var(--ease); }
.charm-btn:disabled { cursor: default; }
.charm-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
@media (hover: hover) { .charm-btn:not(:disabled):hover { transform: translateY(-4px); } }
.charm-btn:not(:disabled):active { transform: scale(0.98); transition-duration: .12s; }
.charm-hang { display: block; position: relative; container-type: inline-size; width: 100%; transform-origin: 50% 0; will-change: transform; }
.charm-svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 22px 26px var(--tone-1)); }
.charm-svg .pouch { fill: var(--pouch); }
.charm-svg .wave { fill: var(--pouch); stroke: var(--pouch-line); stroke-width: 1.4; }
.charm-svg .stitch { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .9; }
.charm-svg .panel { fill: var(--paper-3); stroke: var(--gold); stroke-width: 2; }
.charm-svg .panel-in { fill: none; stroke: var(--gold); stroke-width: .8; }
.charm-svg .kana { font-family: var(--f-brush); font-size: 50px; fill: var(--ink); text-anchor: middle; }
.charm-svg .cord-under { fill: none; stroke: var(--cord-shade); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.charm-svg .cord-top { fill: none; stroke: var(--cord); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.charm-svg .cord-twist { fill: none; stroke: var(--cord-shade); stroke-width: 4.2; stroke-dasharray: 1.4 4.2; stroke-linecap: butt; opacity: .55; }
.charm-svg .knot-wrap { fill: var(--cord); stroke: var(--cord-shade); stroke-width: 2; stroke-linejoin: round; }
.charm-svg .knot-wrap-line { fill: none; stroke: var(--cord-shade); stroke-width: 1.2; stroke-linecap: round; opacity: .7; }
.charm-svg .sheen { fill: url(#sheen); pointer-events: none; }
.charm-svg .body-g { transition: filter .8s var(--ease); }

/* tie / untie: the cord paths are moved by knot.js; CSS only greys the fabric when off */
.is-off .charm-svg .body-g { filter: saturate(0.25) brightness(1.08); }

.charm-status { margin: 14px 0 0; text-align: center; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.charm-status b { font-weight: 700; color: var(--ink); }
.charm-status .st-text, .charm-status .hint { display: block; }
.charm-status .hint { color: color-mix(in srgb, var(--ink-3) 72%, var(--ink)); }   /* a shade darker: it sits in the charm's soft shadow */
html:not(.js) .charm-status .hint, .charm-status.tapped .hint { display: none; }
.charm-note { margin: 16px 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--ink-3); text-align: center; text-wrap: balance; }
.charm-note span { display: block; white-space: nowrap; }

/* ---------- sections ---------- */
.sec { padding: clamp(80px, 11vw, 160px) 0; position: relative; }
.sec h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); max-width: 18ch; }
.sec .intro { font-size: 1.1875rem; color: var(--ink-2); max-width: 54ch; margin-top: 24px; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
/* ---------- features ---------- */
.anchor { position: absolute; top: 0; }
.feats h2 { max-width: 20ch; }
.ft-grid { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ft { position: relative; background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px 22px 24px; display: flex; flex-direction: column; }
.ft-apps { grid-column: span 2; }
.ft h3 { font-size: 1.25rem; line-height: 1.2; margin: 18px 0 8px; }
.ft p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.ft p a { color: var(--shu-deep); font-weight: 500; white-space: nowrap; }
.ft-art { width: 100%; height: auto; aspect-ratio: 160 / 100; max-height: 190px; overflow: visible; }
/* tile art materials: sumi ink, washi paper, the charm cord, the vermilion seal */
.ft-art .ink-l { fill: none; stroke: var(--ink); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.ft-art .ink-l.thin { stroke-width: 2.6; }
.ft-art .shu-l { fill: none; stroke: var(--shu); stroke-width: 2.2; stroke-linecap: round; }
.ft-art .shu-b { fill: none; stroke: var(--shu); stroke-width: 5; stroke-linecap: round; }
.ft-art .dash-l { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 3 4; stroke-linecap: round; }
.ft-art .dot { fill: var(--ink); }
.ft-art .app { fill: var(--ink); }
.ft-art .app + svg { --mk-out: var(--paper-3); --mk-in: var(--ink); --mk-tor: var(--paper-3); }
.ft-art .cord-u { fill: none; stroke: var(--cord-shade); stroke-width: 5.6; stroke-linecap: round; }
.ft-art .cord-t { fill: none; stroke: var(--cord); stroke-width: 3.2; stroke-linecap: round; }
.ft-art .knot { fill: var(--cord); stroke: var(--cord-shade); stroke-width: 1.6; }
.ft-art .slipr, .ft-art .sheet, .ft-art .field-r, .ft-art .phone { fill: #fffaf1; stroke: rgba(28, 23, 20, .38); stroke-width: 1.2; }
.ft-art .phone { fill: var(--paper); stroke: var(--ink); stroke-width: 2.4; }
.ft-art .slipt { font: 500 9.5px/1 var(--f-body); fill: var(--ink); text-anchor: middle; }
.ft-art .sealr { fill: var(--shu); }
.ft-art .sealk { font: 400 17px/1 var(--f-brush); fill: var(--on-ink); text-anchor: middle; }
.ft-art .xmark { fill: none; stroke: var(--shu); stroke-width: 2.6; stroke-linecap: round; }
.ft-art .tmark { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ft-art .appsq { fill: var(--ink-3); }
.ft-art .qline { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 4; }
.ft-art .qline.sm { stroke-width: 2.2; stroke-dasharray: 3 3; }
.ft-art .track { fill: var(--shu); }
.ft-art .knob { fill: var(--paper-3); stroke: rgba(28, 23, 20, .25); stroke-width: 1; }
.ft-art .sway { transform-box: fill-box; transform-origin: 50% 0; }
.ft-art .press, .ft-art .pop, .ft-art .cinch { transform-box: fill-box; transform-origin: 50% 50%; }
.ft-art .grow { transform-box: fill-box; transform-origin: 0 50%; }
/* the art plays once when its tile comes into view (site.js adds .arm, then .play; .hold pauses it off-screen).
   No JS or reduced motion: no animation, the drawing is simply there. */
.ft.arm .a { animation: var(--an, none) var(--du, .5s) cubic-bezier(.3, .1, .25, 1) var(--de, 0s) both paused; }
.ft.arm.play .a { animation-play-state: running; }
.ft.arm.play.hold .a { animation-play-state: paused; }
.ft-art .draw { stroke-dasharray: 1 2; stroke-dashoffset: 0; --an: ft-draw; }
.ft-art .pop { --an: ft-pop; --du: .32s; }
.ft-art .press { --an: ft-press; --du: .34s; }
.ft-art .cinch { --an: ft-cinch; }
.ft-art .sway { --an: ft-sway; --du: .8s; }
.ft-art .grow { --an: ft-grow; }
.ft-art .fill { --an: ft-fill; }
.ft-art .slide { --an: ft-slide; }
@keyframes ft-pop { from { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes ft-press { 0% { opacity: 0; transform: scale(1.35) rotate(-6deg); } 55% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes ft-cinch { 0% { opacity: 0; transform: scale(1.5); } 60% { opacity: 1; transform: scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes ft-sway { 0% { opacity: 0; transform: translateY(-8px) rotate(-7deg); } 55% { opacity: 1; transform: rotate(3deg); } 80% { transform: rotate(-1.2deg); } 100% { opacity: 1; transform: none; } }
@keyframes ft-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ft-fill { from { fill: var(--paper-2); } to { fill: var(--shu); } }
@keyframes ft-slide { from { transform: translateX(-20px); } to { transform: none; } }

/* apps tile: three app squares. A tap ripple opens a small page in each; an adult-site tap opens nothing and a
   small 守 seal settles on the app. No lines, no arrows. Labels 13px. site.js plays one calm tap every 2.3 s while the
   tile is on screen (.live; .hold pauses it). Without JS or with reduced motion the rest frame is shown:
   Browser and Search with their page open, Social with the seal. */
.apps-fig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 420px; width: 100%; margin: 4px auto 0; }
.af { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.af-out { position: relative; width: 100%; height: 78px; }
.af-page { position: absolute; left: 0; right: 0; bottom: 0; width: min(100%, 100px); margin: 0 auto; box-sizing: border-box; display: grid; gap: 7px; padding: 6px 6px 8px;
  background: #fffaf1; border: 1px solid rgba(28, 23, 20, .38); border-radius: 6px; box-shadow: 0 3px 5px -3px rgba(60, 30, 12, .32);
  transform-origin: 50% 100%; opacity: 0; }
.af-page i { display: block; height: 30px; border-radius: 3px; background: var(--paper-2); }
.af-page b { font: 500 13px/1 var(--f-body); color: var(--ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.af-no { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; white-space: nowrap; font: 700 13px/1 var(--f-body); color: var(--shu-deep); opacity: 0; }
.af-ic { position: relative; width: 56px; height: 56px; display: block; transform-origin: 50% 50%; }
.af-ic svg { display: block; width: 100%; height: 100%; }
.af-ic .sq { fill: var(--ink); }
.af-ic .gl { fill: none; stroke: var(--paper-3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.af-ic .gl .f { fill: var(--paper-3); stroke: none; }
.af-rip { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(246, 239, 226, .0) 55%, rgba(246, 239, 226, .55) 80%, rgba(246, 239, 226, 0)); opacity: 0; }
.af-seal { position: absolute; right: -9px; top: -9px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 4px;
  background: var(--shu); color: var(--on-ink); font: 400 17px/1 var(--f-brush); box-shadow: 0 2px 3px -1px rgba(60, 30, 12, .35);
  transform: rotate(-8deg); opacity: 0; }
.af-name { font: 500 13px/1 var(--f-body); color: var(--ink-3); }
/* rest frame (no JS, reduced motion) */
.apps-fig:not(.live) .r-ok .af-page { opacity: 1; }
.apps-fig:not(.live) .r-bad .af-seal, .apps-fig:not(.live) .r-bad .af-no { opacity: 1; }
/* one tap */
.af.ok .af-ic, .af.bad .af-ic { animation: af-press .38s cubic-bezier(.3, 0, .3, 1); }
.af.ok .af-rip, .af.bad .af-rip { animation: af-rip .7s cubic-bezier(.2, .6, .35, 1); }
.af.ok .af-page { animation: af-open 2.05s cubic-bezier(.2, .7, .25, 1) .16s both; }
.af.bad .af-seal { animation: af-seal 2.05s cubic-bezier(.2, .7, .3, 1) .24s both; }
.af.bad .af-no { animation: af-no 2.05s ease .3s both; }
.apps-fig.hold .af * { animation-play-state: paused; }
@keyframes af-press { 0% { transform: none; } 35% { transform: scale(.93); } 100% { transform: none; } }
@keyframes af-rip { 0% { opacity: .95; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes af-open { 0% { opacity: 0; transform: translateY(26px) scale(.4); } 20% { opacity: 1; transform: none; } 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(6px) scale(.95); } }
@keyframes af-seal { 0% { opacity: 0; transform: rotate(-8deg) scale(1.45); } 12% { opacity: 1; transform: rotate(-8deg) scale(.94); } 20% { transform: rotate(-8deg) scale(1); }
  82% { opacity: 1; transform: rotate(-8deg) scale(1); } 100% { opacity: 0; transform: rotate(-8deg) translateY(-3px); } }
@keyframes af-no { 0% { opacity: 0; } 14% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 600px) { .apps-fig { gap: 4px; } .af-ic { width: 52px; height: 52px; } }
@media (min-width: 900px) { .apps-fig { max-width: 520px; margin-top: 14px; } .af { gap: 10px; } .af-out { height: 96px; } .af-page { width: min(100%, 120px); } .af-page i { height: 40px; } .af-ic { width: 66px; height: 66px; } }

/* locks */
.locks { background: var(--ink); color: var(--on-ink); }
.locks h2, .locks h3 { color: var(--on-ink); }
.locks .intro { color: color-mix(in srgb, var(--on-ink) 72%, var(--ink)); }
.locks :focus-visible { outline-color: var(--on-ink); }
.lock-ui { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; margin-top: 64px; align-items: stretch; }
.tabs { display: grid; gap: 0; align-content: start; border-top: 1px solid var(--tone-2); }
.tab { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 24px 8px 24px 0; border-bottom: 1px solid var(--tone-2); color: color-mix(in srgb, var(--on-ink) 62%, var(--ink)); transition: color .25s var(--ease); }
.tab:hover { color: var(--on-ink); }
.tab[aria-selected="true"] { color: var(--on-ink); }
.tab .k { font: 400 2.25rem/1 var(--f-brush); color: color-mix(in srgb, var(--on-ink) 40%, var(--ink)); transition: color .25s var(--ease); }
.tab[aria-selected="true"] .k { color: var(--shu-soft); }
.tab b { display: block; font: 800 1.5rem/1.2 var(--f-display); margin-bottom: 4px; }
.tab span { font-size: 0.9375rem; line-height: 1.5; display: block; }
.tab:focus-visible { outline: 2px solid var(--on-ink); outline-offset: -2px; }
.tabs { position: relative; }
/* the card eases its height on tab change; keep the browser from re-anchoring the scroll inside it */
.lock-ui { overflow-anchor: none; }
.tab-ink { position: absolute; left: 0; top: 0; width: 1px; height: 1px; background: var(--shu-soft); transform-origin: 0 0; pointer-events: none; opacity: 0; }
.tab-ink.ready { opacity: 1; transition: transform .42s cubic-bezier(.65, .05, .2, 1); }
.panel-wrap { overflow: hidden; background: var(--paper); color: var(--ink); border-radius: var(--r-panel); padding: clamp(24px, 4vw, 48px); min-height: 440px; display: grid; position: relative; }
.lpanel { display: grid; gap: 20px; align-content: center; justify-items: center; text-align: center; }
.lpanel[hidden] { display: none; }
.lpanel h3 { font-size: 1.5rem; color: var(--ink); }

.lpanel p { color: var(--ink-2); max-width: 46ch; margin: 0; }
.enso { width: 220px; height: 220px; position: relative; }
.enso svg { width: 100%; height: 100%; }
.enso .track { fill: none; stroke: var(--line); stroke-width: 3; }
.enso svg { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 2.4'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 2.4'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask-size: 110px; mask-size: 110px; }
.enso .ink { fill: var(--ink); }
.enso .wet { fill: #050302; opacity: 0; }
.enso .time .dg { display: inline-block; position: relative; overflow: hidden; height: 1.1em; line-height: 1.1em; vertical-align: top; }
.enso .time .dg > span { display: block; }
.enso .time .dg > .nx { position: absolute; left: 0; top: 0; }
.enso .time { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 2.5rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 4px; gap: 2px; }
.seg button { all: unset; cursor: pointer; padding: 8px 16px; border-radius: 7px; font-size: 0.9375rem; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.phrase-target { font: 500 1.125rem/1.6 var(--f-display); max-width: 30ch; }
.phrase-target span { display: inline-block; color: var(--ink-3); }
.phrase-target span.ok { color: var(--ink); }
.phrase-target span.bad { color: var(--shu-deep); text-decoration: underline wavy var(--shu); text-underline-offset: 4px; }
.field { width: min(100%, 420px); min-height: 52px; border: 1px solid var(--line-strong); background: var(--paper-3); border-radius: var(--r-ctl); padding: 12px 16px; font: 400 1rem var(--f-body); color: var(--ink); caret-color: var(--shu); }
.field:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pin-row { position: relative; display: flex; align-items: center; justify-content: center; height: 34px; }
.pin-dots { display: flex; gap: 16px; }
.pin-dots i { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink); box-sizing: border-box; }
.pin-dots i::after { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; background: var(--ink); opacity: 0; transform: scale(.35); transition: opacity .12s linear, transform .28s cubic-bezier(.2, .8, .25, 1); }
.pin-dots i::before { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0; }
.pin-dots i.on::after { opacity: 1; transform: scale(1); }
.pin-dots i.on::before { animation: drop-spread .5s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes drop-spread { 0% { opacity: .4; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.pin-seal { position: absolute; left: calc(50% + 66px); top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 4px; background: var(--shu); color: var(--on-ink); display: grid; place-items: center; font: 400 19px/1 var(--f-brush); opacity: 0; transform: rotate(var(--rot, -7deg)); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 2.05'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 2.05'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask-size: 48px; mask-size: 48px; }
.pin-seal.press { animation: seal-press .2s cubic-bezier(.2, .8, .25, 1) both; }
.pin-seal.lift { opacity: 0; transition: opacity .2s cubic-bezier(.4, 0, 1, 1); }
.keypad { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; }
.keypad button { all: unset; cursor: pointer; height: 52px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); text-align: center; font: 500 1.25rem/52px var(--f-body); font-variant-numeric: tabular-nums; transition: background-color .15s var(--ease); }
@media (hover: hover) { .keypad button:hover { background: var(--paper-3); } }
.keypad button, .seg button, .tab, .charm-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.keypad button:active { background: var(--paper-2); }
.keypad button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.status { min-height: 3.2em; font-size: 0.9375rem; color: var(--ink-2); }
.status.done { color: var(--shu-deep); font-weight: 500; }
.lock-foot { margin-top: 48px; max-width: 70ch; color: color-mix(in srgb, var(--on-ink) 72%, var(--ink)); font-size: 1rem; }

/* honesty table */
.compare { margin-top: 56px; border-top: 2px solid var(--ink); }
.crow { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.crow.head { padding: 16px 0; font-family: var(--f-display); font-weight: 800; font-size: 1.375rem; }
.crow .q { font-weight: 700; }
.crow p { margin: 0; color: var(--ink-2); font-size: 1rem; }

/* privacy */
.privacy .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.privacy h2 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); max-width: 14ch; }
.plist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.plist li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.plist b { color: var(--ink); font-weight: 700; }

/* pricing board */
.board { margin-top: 56px; max-width: 880px; border-top: 2px solid var(--ink); }
.plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line); }
.plan h3 { font-size: 1.625rem; display: flex; align-items: baseline; gap: 16px; }
.plan h3::after { content: ""; flex: 1; border-bottom: 2px dotted var(--line-strong); transform: translateY(-6px); min-width: 24px; }
.plan .price { font: 800 clamp(1.75rem, 3.4vw, 2.5rem)/1 var(--f-display); font-variant-numeric: tabular-nums lining-nums; }
.plan .price small { font: 400 1rem var(--f-body); color: var(--ink-3); margin-left: 8px; }
.plan p { grid-column: 1 / -1; margin: 0; color: var(--ink-3); font-size: 0.9375rem; }
.board-note { margin-top: 20px; color: var(--ink-3); font-size: 0.9375rem; max-width: 66ch; }

/* faq */
.faq { margin-top: 48px; max-width: 880px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center; padding: 24px 0; font: 800 1.25rem/1.35 var(--f-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 24px; height: 24px; transition: transform .3s var(--ease); }
.faq summary .st { fill: none; stroke: var(--shu); stroke-width: 1.6; stroke-linecap: round; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { margin: 0 0 24px; color: var(--ink-2); max-width: 66ch; }
.faq summary:focus-visible { outline-offset: -2px; }

/* final + footer */
.final { text-align: left; }
.final .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; }
.final h2 { font-size: clamp(2.5rem, 6vw, 5rem); max-width: 12ch; }
.big-kanji { position: absolute; right: var(--gut); top: 50%; transform: translateY(-50%); font: 400 clamp(10rem, 22vw, 20rem)/1 var(--f-brush); color: var(--shu); opacity: .12; pointer-events: none; user-select: none; }
.foot { border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 0.9375rem; color: var(--ink-2); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot a { text-decoration: none; display: inline-block; padding: 8px 0; }
.foot a:hover { text-decoration: underline; }
.foot h3 { font-family: var(--f-body); font-weight: 700; font-size: 0.9375rem; margin-bottom: 8px; letter-spacing: 0; }
.foot .brand { display: inline-flex; padding: 0; }


/* ---------- production additions ---------- */
/* the charm keeps its box before the SVG paints, so nothing shifts */
.charm-svg { aspect-ratio: 320 / 560; }

/* the 守 seal: one physical move. When the knot cinches it comes down from a little above (scale 1.12 to 0.98 to 1, 260 ms),
   at a small angle chosen before the move; the ink spreads in the last 80 ms and a faint pressed shadow appears under it.
   On untie it lifts and fades (180 ms). site.js runs both moves; CSS only holds the resting states. */
.seal-wrap { position: absolute; right: 12%; bottom: 6%; width: 14.5%; aspect-ratio: 1; transform: rotate(var(--rot, -8deg)); pointer-events: none; }
.charm-stage:not(.sealed) .seal-wrap { opacity: 0; }
.seal-sh { position: absolute; inset: 0; border-radius: 4px; box-shadow: 0 1.5px 1.5px rgba(60, 25, 10, .30), 0 0 1px 1px rgba(60, 25, 10, .12); }
.seal { position: absolute; inset: 0; border-radius: 4px; background: var(--shu); color: var(--on-ink); display: grid; place-items: center;
  font: 400 26px/1 var(--f-brush); font-size: 9cqw;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 2.5'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 2.5'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask-size: 44px; mask-size: 44px; }
}
.seal b { position: relative; font-weight: 400; }
.seal-ink { position: absolute; inset: 0; background: radial-gradient(closest-side, transparent 62%, rgba(110, 18, 6, .38) 100%); }

/* idle life while protection is on: a warm glow that breathes, an almost still sway, the bow drifting, a slow glint on the silk.
   Transform and opacity only; paused off-screen or in a hidden tab (.idle-off), frozen when untied, none with reduced motion. */
.charm-btn { position: relative; }
.charm-hang { z-index: 1; }
.charm-glow { position: absolute; left: 50%; top: 58%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; transition: opacity .9s cubic-bezier(.3, 0, .2, 1); }
.charm-glow i { position: absolute; inset: 0; border-radius: 50%; opacity: .55; will-change: opacity;
  background: radial-gradient(closest-side, rgba(255, 238, 205, .95), rgba(255, 233, 196, .55) 45%, rgba(255, 233, 196, 0) 100%); animation: glow-breathe 9s ease-in-out infinite alternate; }
@keyframes glow-breathe { from { opacity: .4; } to { opacity: .85; } }
.charm-idle { display: block; position: relative; transform-origin: 50% 0; will-change: transform; animation: idle-sway 7.4s ease-in-out infinite alternate; }
@keyframes idle-sway { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
.charm-svg [data-knot] { transform-origin: 160px 171px; animation: knot-drift 5.2s ease-in-out infinite alternate; }
@keyframes knot-drift { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
.glint { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 320 / 560; overflow: hidden; pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 560' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M108 176H212L256 226V524Q256 544 236 544H84Q64 544 64 524V226ZM112 262V512H208V262Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 560' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M108 176H212L256 226V524Q256 544 236 544H84Q64 544 64 524V226ZM112 262V512H208V262Z'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.glint i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(100deg, rgba(255, 236, 214, 0) 20%, rgba(255, 236, 214, .32) 50%, rgba(255, 236, 214, 0) 80%);
  transform: translateX(-110%) skewX(-12deg); animation: glint 7s cubic-bezier(.45, 0, .35, 1) 2.6s infinite; }
@keyframes glint { 0%, 74% { opacity: 0; transform: translateX(-110%) skewX(-12deg); } 78% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; transform: translateX(240%) skewX(-12deg); } }
.is-off .charm-glow, .tie-in .charm-glow { opacity: 0; }
.is-off .charm-idle, .is-off [data-knot], .is-off .glint i, .idle-off .charm-idle, .idle-off [data-knot], .idle-off .glint i, .idle-off .charm-glow i { animation-play-state: paused; }
.is-off .glint, .tie-in .glint { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .charm-glow i { opacity: .55; } .glint { display: none; } }

/* first paint with JS: the charm starts loose and grey, so the tie animation is the first thing seen
   (tie-in is removed by site.js, or after 4 s if the scripts never load) */
.tie-in [data-knot] { visibility: hidden; }
.tie-in .charm-svg .body-g { filter: saturate(0.25) brightness(1.08); }
.tie-in .seal-wrap { opacity: 0; }

/* hero order and spacing (desktop and tablet) */
.charm-btn { order: -2; width: var(--cw); }
.charm-status { order: -1; margin: 10px 0 0; }
.hero h1 { order: 0; margin-top: clamp(14px, 2.4svh, 28px); }
.hero .lede { order: 1; max-width: 50ch; margin: 18px 0 0; }
.hero .cta { order: 2; justify-content: center; margin-top: 26px; }
.hero .fine { order: 3; margin: 12px 0 0; }
.charm-note { order: 4; margin-top: 18px; }

/* focus ring stays dark on the paper panel inside the ink section */
.locks .panel-wrap :focus-visible { outline-color: var(--ink); }

/* who it's for */
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
.who > div { border-top: 2px solid var(--ink); padding-top: 24px; }
.who h3 { font-size: 1.5rem; margin-bottom: 12px; }
.who p { color: var(--ink-2); margin: 0; }

/* guides */
.glist { list-style: none; margin: 48px 0 0; padding: 0; max-width: 880px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 1px solid var(--line); }
.glist li { border-bottom: 1px solid var(--line); }
.glist a { display: block; padding: 16px 0; text-decoration: none; font-weight: 500; }
.glist a:hover { text-decoration: underline; }
.more { margin-top: 24px; }
.faq-note { margin-top: 24px; color: var(--ink-2); max-width: 66ch; }

@media (max-width: 960px) {
  .who, .glist { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .glist { gap: 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nav ul { display: none; }
  .nav .wrap { justify-content: space-between; height: 64px; }
  .lock-ui, .privacy .wrap, .final .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .crow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 20px; }
  .crow .q { grid-column: 1 / -1; }
  .crow.head { display: none; }
  .crow p::before { content: attr(data-p); display: block; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
  .foot .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .big-kanji { top: 8%; transform: none; }
}
@media (max-width: 719px) and (min-width: 601px) {
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-apps, .ft-jp { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .crow { grid-template-columns: minmax(0, 1fr); }
  .cta .btn { flex: 1 1 100%; }
  .keypad { grid-template-columns: repeat(3, 60px); }
  .plan h3::after { display: none; }
}

/* phone: the charm leads the first screen, smaller and centred above the H1; status under the charm, note below the buttons */
@media (max-width: 600px) {
  .hero { --cw: min(42vw, 176px, 17svh); }
  .hero .wrap { padding-top: 12px; padding-bottom: 40px; }
  .hero::before { top: calc(12px + var(--cw) * .45); height: calc(var(--cw) * 1.1); }
  /* charm about 30% of the visible height, so charm + H1 + both buttons fit the first screen with browser bars */
  .charm-btn { order: -1; }
  .charm-status { order: -1; margin: 6px 0 12px; font-size: 0.8125rem; line-height: 1.45; }
  .hero h1 { font-size: clamp(2.25rem, 10.4vw, 2.75rem); margin-top: 0; }
  .hero .lede { order: 1; margin: 20px 0 0; text-align: center; }
  .hero .cta { margin-top: 18px; align-self: stretch; }
  .hero .cta, .hero .fine { order: 0; }
  .hero .fine { margin: 12px 0 0; }
  .charm-note { order: 2; margin-top: 24px; }
  /* consistent rhythm on phone */
  .sec { padding: 64px 0; }
  .ft-grid { margin-top: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ft { padding: 14px 14px 18px; }
  .ft-apps, .ft-jp { grid-column: 1 / -1; }
  .ft h3 { font-size: 1.0625rem; margin-top: 12px; }
  .ft p { font-size: 0.875rem; line-height: 1.5; }
  .ft-jp .ft-art { max-height: 150px; }
  .sec .intro { margin-top: 16px; }
  .who, .board, .faq, .compare, .glist { margin-top: 32px; }
  .lock-ui { margin-top: 32px; gap: 16px; }
  .lock-foot { margin-top: 28px; }
  /* lock demo on phone: the three locks are one row of tabs right above their demo */
  .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; border-bottom: 1px solid var(--tone-2); }
  .tab { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 4px; padding: 10px 4px 12px; }
  .tab .k { font-size: 1.5rem; }
  .tab b { font-size: 1.0625rem; margin: 0; text-wrap: balance; }
  .tab b + span { display: none; }
  .panel-wrap { min-height: 0; padding: 24px 18px 28px; }
  .lpanel { gap: 16px; align-content: start; }
  .lpanel h3 { font-size: 1.375rem; }
}

/* ---------- v3: night falls down the page ----------
   The page's own colour goes from warm paper (hero, features) through evening into deep night (locks, phones, privacy),
   stays dark through pricing, questions and guides while it warms, and breaks into dawn at "Tie it on tonight".
   Each section owns its stretch of the sky, so every line of text always sits on the colour its tokens were chosen for
   (AA at every scroll position). The only mid tones are in the text-free bands at the two hand-overs.
   A faint grain dithers the long dark gradients, so they do not band. */
:root { --dusk: #3a2a2b; --n0: #1f1820; --n1: #17131b; --n2: #15121a; --n3: #1a1520; --n4: #221923; --n5: #2b1d25; --n6: #372227; --dawn: #f1d6bf; }
.feats { padding-bottom: calc(clamp(80px, 11vw, 160px) + clamp(120px, 16vw, 220px));
  background: linear-gradient(to bottom, transparent calc(100% - clamp(150px, 20vw, 280px)), color-mix(in srgb, var(--dusk) 22%, transparent) calc(100% - clamp(100px, 13vw, 190px)), var(--dusk) 100%); }
.locks { background: linear-gradient(var(--dusk), var(--n0) 45%, var(--n1)); }
.night { --ink: #f3ebde; --ink-2: #dcd1c2; --ink-3: #b9ad9e; --line: rgba(243, 235, 222, .16); --line-strong: rgba(243, 235, 222, .34);
  --shu: #ec7a5f; --shu-deep: #f1b9a6; --focus: #f3ebde; --paper-3: rgba(243, 235, 222, .08);
  color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .72 0 0 0 0 .62 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(var(--top), var(--bot)); }
.night + .night { box-shadow: inset 0 1px 0 rgba(243, 235, 222, .08); }
.n1 { --top: var(--n1); --bot: var(--n2); }
.n2 { --top: var(--n2); --bot: var(--n2); }
.n3 { --top: var(--n2); --bot: var(--n3); }
.n4 { --top: var(--n3); --bot: var(--n4); }
.n5 { --top: var(--n4); --bot: var(--n5); }
.n6 { --top: var(--n5); --bot: var(--n6); padding-bottom: calc(clamp(80px, 11vw, 160px) + clamp(120px, 16vw, 220px));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .72 0 0 0 0 .62 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(var(--n5), var(--n6) calc(100% - clamp(150px, 20vw, 280px)), color-mix(in srgb, var(--n6) 55%, var(--dawn)) calc(100% - clamp(70px, 9vw, 130px)), var(--dawn) 100%); }
.night a:hover { color: var(--shu-deep); }
.dawn { background: linear-gradient(var(--dawn), color-mix(in srgb, var(--dawn) 45%, var(--paper)) 70%, var(--paper)); }
.dawn .big-kanji { opacity: .16; }

/* ---------- v3: download buttons press like a seal ---------- */
.cta .btn { position: relative; overflow: hidden; isolation: isolate; }
.stamp { position: absolute; z-index: -1; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 4px; background: var(--shu); color: var(--on-ink);
  display: grid; place-items: center; font: 400 19px/1 var(--f-brush); pointer-events: none; }

/* ---------- v3: FAQ answers unfold like folded paper (two panels, a soft crease that fades) ---------- */
.faq details p { position: relative; transform-origin: 50% 0; }
.faq details.unfold p { animation: faq-unfold .52s cubic-bezier(.2, .75, .25, 1) both; }
.faq details.unfold p::after { content: ""; position: absolute; left: -8px; right: -8px; top: 42%; height: 16%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .28) 50%, transparent); animation: faq-crease .52s cubic-bezier(.3, 0, .3, 1) both; }
@keyframes faq-unfold { 0% { opacity: 0; transform: perspective(900px) rotateX(-78deg) scaleY(.5); } 38% { opacity: 1; transform: perspective(900px) rotateX(-26deg) scaleY(.82); }
  72% { transform: perspective(900px) rotateX(5deg) scaleY(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes faq-crease { 0% { opacity: 1; } 60% { opacity: .5; } 100% { opacity: 0; } }

/* ---------- v3: guides as paper fortune slips in a small box ---------- */
.glist { padding: 18px; gap: 12px; column-gap: 14px; background: #110e13; border: 1px solid rgba(243, 235, 222, .14); border-radius: 12px;
  box-shadow: inset 0 10px 24px -12px rgba(0, 0, 0, .8), inset 0 0 0 5px #1a1519; }
.glist li { position: relative; border: 0; background: #fbf6ec; border-radius: 3px; transform: rotate(var(--r, 0deg));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 10px 18px -12px rgba(0, 0, 0, .9); transition: transform .28s cubic-bezier(.2, .8, .25, 1), box-shadow .28s cubic-bezier(.2, .8, .25, 1); }
.glist li:nth-child(4n+1) { --r: -.5deg; } .glist li:nth-child(4n+2) { --r: .4deg; } .glist li:nth-child(4n+3) { --r: .3deg; } .glist li:nth-child(4n) { --r: -.35deg; }
.glist li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 3px 0 0 3px; background: #c3371f; }
.glist a { color: #1c1714; padding: 14px 16px 14px 22px; }
.glist a:hover { color: #9c2814; }
.glist a:focus-visible { outline-color: #1c1714; outline-offset: -3px; }
@media (hover: hover) { .glist li:hover { transform: translateY(-5px) rotate(var(--r, 0deg)); box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 26px -14px rgba(0, 0, 0, .95); } }
.glist li:active, .glist li:focus-within { transform: translateY(-5px) rotate(var(--r, 0deg)); }
.glist.arm li { animation: slip-up .62s cubic-bezier(.2, .8, .25, 1) calc(var(--i, 0) * 75ms) both paused; }
.glist.arm.play li { animation-play-state: running; }
.glist.arm.play.hold li { animation-play-state: paused; }
@keyframes slip-up { from { opacity: 0; transform: translateY(26px) rotate(var(--r, 0deg)); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }

/* ---------- v3: tile art drawn in ink: a pen that presses, speeds up, and slows into the end of each stroke ---------- */
@keyframes ft-draw { 0% { stroke-dashoffset: 1; } 14% { stroke-dashoffset: .95; animation-timing-function: cubic-bezier(.4, 0, .6, 1); } 62% { stroke-dashoffset: .3; animation-timing-function: cubic-bezier(.2, .5, .3, 1); } 100% { stroke-dashoffset: 0; } }
.ft-art .ink { stroke-dasharray: 1 2; --an: ft-ink; --du: .9s; }
.ft-art .app.ink { stroke: var(--ink); stroke-width: 2; }
@keyframes ft-ink { 0% { stroke-dashoffset: 1; fill-opacity: 0; } 12% { stroke-dashoffset: .95; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  60% { stroke-dashoffset: .28; fill-opacity: 0; animation-timing-function: cubic-bezier(.2, .5, .3, 1); } 85% { stroke-dashoffset: 0; fill-opacity: .2; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } }

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