/* 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-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; }
/* "+" from a Latin-width plus (tools/make_plus_font.py): Zen Kaku draws it as a full-width cross. Declared after the
   Zen Kaku faces so it wins for U+002B only; inline, so there is no request and no swap. */
@font-face { font-family: "ZenKaku"; src: url(data:font/woff2;base64,d09GMgABAAAAAAFEAAoAAAAAApAAAAD7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAANAowSwE2AiQDCAsGAAQgBWkHJhvvAQCeBe7eDmlfJKAb1ZngGMWceJAfa2/7QyWKp+uYJ2tiqZMtpIA3qJy6bbxVm6uGKoihyIPI4SJc3ggYcJB0cuG3Ci0BfBonFHadHJ/oIP4tuWGgnhVHEeY8POuJiO6u2UUtZ2I9ChnAfhsHik6r+0Q9xQIAYAEkGqY1gWllAaUEOl1pmwYBIEGhYRjjgAK0qnqIdBnuOtz2Kclns6tIAgSC4def7zVWf2jtHd68QNWOx0SegiZBUE//a/JEs5MIAEDGb2NOIA1rIAEAUNYECIMIkPoMaqIGhGkTOaVRqxf7aTv7imdSP0CnrieYwaVv2o7kVBCmjkcBAAAA) format("woff2"); font-weight: 400; unicode-range: U+002B; }
@font-face { font-family: "ZenKaku"; src: url(data:font/woff2;base64,d09GMgABAAAAAAFMAAoAAAAAApQAAAEFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAANAo0SwE2AiQDCAsGAAQgBWkHJhvvAQAuCuyGY4dccRv1VcPBIX18J4Jq6Pbuj1pk6Sqe1lUThm5xCIWO1FiQGA/jA5J8U/lex+s4KTk+h7SyVhbYgMMw0MFwkNFOIgzX/Ae31snxiQ7ibckNA5SAgrYCjDC3sePQIQiBuxVd1HIhegYUMoDjMU6QTnvtl+pGAAArINEwrwnMKysoJdDpcycJAAkKDeOYBhSgVdVdTHiOMbcxZv/U1wUfn34O8kAgeJf95MHvcGs/8N3fuKoOvOVwXgJNgqC6/5MX2EEOCwBARq+xJ5DGNZAAAChbAoRRBEhDRjVRI8K8mTmkSZs3+1MvZ1/+TOoHVLiecZi2PpfKamGgsI4mAQA=) format("woff2"); font-weight: 500; unicode-range: U+002B; }
@font-face { font-family: "ZenKaku"; src: url(data:font/woff2;base64,d09GMgABAAAAAAFQAAoAAAAAApQAAAEKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAANAo0SwE2AiQDCAsGAAQgBWkHJhvvAQCuCuzGxztMoWJ3l1pjbwTF8FenmyKo30/37r2khBJYxZdYAbuyUtURukr/ON2OB9l8U/lex+t4lRyfQ1K0sjQCAxwv2IADCzgwHIA2rTEAmcH11FcoL50cn+gg/i25YaCeFUcR5jw864mI7q7ZRSXnci0VGcBhG0dIp9QftRsCAJZAomBWEZhVLaGqAp1+2tYFgAQVBaOYBFRAqbU+xZj3GPEYI3Z3HoKmR+9+onlogEDwaTux90sp3/DFn6ja85GDeQ4UCYLa/Z88w/YSAQDI+GnMCaRRBSQAAKoNAcIwAqQBw4qoQ8KsqZzSuPWr/XSdfcUzqR+AcONZRbXzmZBOcwuZOh4H) format("woff2"); font-weight: 700; unicode-range: U+002B; }
/* fonts gate (see the head script) */
.fl .nav .wrap, .fl .hero .wrap { visibility: hidden; }

:root {
  --silk-mask: 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");
  --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: var(--hdr, 65px); }
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 { position: relative; width: 100%; height: auto; overflow: visible; }
.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 .stitch-sh { fill: none; stroke: #3a0c04; stroke-width: 1.9; stroke-dasharray: 5 4; opacity: .38; transform: translate(.5px, .9px); }
.charm-svg .stitch-hi { fill: none; stroke: #fbe7b8; stroke-width: .7; stroke-dasharray: 5 4; opacity: .75; transform: translate(-.35px, -.45px); }
.charm-svg .fold { fill: none; stroke: #2a0602; stroke-width: 7; opacity: .1; stroke-linecap: round; }
.charm-svg .rim { fill: none; stroke: url(#rim); stroke-width: 3.2; }
.charm-svg .psh { fill: #2a0602; opacity: .12; }
.charm-svg .panel { fill: var(--paper-3); stroke: url(#bevel); stroke-width: 2.4; }
.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: #9a7c48; stroke-width: 7.2; stroke-linecap: round; stroke-linejoin: round; }
.charm-svg .cord-top { fill: none; stroke: #e6d3a6; stroke-width: 4.8; stroke-linecap: round; stroke-linejoin: round; }
.charm-svg .cord-twist { fill: none; stroke: #a98a54; stroke-width: 4.8; stroke-dasharray: 1.3 3.5; stroke-linecap: butt; opacity: .5; }
.charm-svg .cord-hi { fill: none; stroke: #fffaec; stroke-width: 1.5; stroke-dasharray: 2.9 1.9; stroke-dashoffset: -.4; stroke-linecap: round; opacity: .85; transform: translate(-.5px, -.6px); }
.charm-svg .knot-sh { fill: #3c2508; opacity: .32; transform: translate(1.3px, 2px); }
.charm-svg .knot-wrap { fill: url(#wrapG); stroke: #a98a54; stroke-width: 1.6; 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 { display: none; }   /* without JS the charm is not a switch */
.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; text-wrap: pretty; }   /* v5b: longer tile copy; no one-word last lines */
.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); fill-rule: evenodd; }
.enso .wet { fill: #050302; fill-rule: evenodd; opacity: 0; }   /* evenodd: the dry-brush streaks in the tail are holes */
.enso .time .dg { display: inline-block; position: relative; overflow: hidden; height: 1.1em; line-height: 1.1em; vertical-align: top; width: .64em; text-align: center; }
.enso .time .dg.cl { width: .3em; }   /* fixed cells: a changing digit never moves its neighbours or the colon */
.enso .time .dg > span { display: block; }
.enso .time .dg > .nx { position: absolute; left: 0; top: 0; width: 100%; }
.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) and (pointer: fine) { .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 2px 3px rgba(50, 12, 4, .38), 0 .5px 1px rgba(50, 12, 4, .3); }
.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::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 1px 1px 0 rgba(255, 214, 190, .32), inset -1px -1.4px 0 rgba(70, 8, 0, .34); }
.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; } }
/* v4 depth: a cast shadow behind the pouch (turns with it) and a contact shadow below (stays). Both are blurred once:
   own compositor layers that never repaint. The light layer moves a touch with the sway (transform only, set by site.js). */
.charm-cast { position: absolute; left: 21%; top: 34%; width: 58%; height: 64%; border-radius: 12% 12% 9% 9%; background: rgba(60, 26, 10, .34);
  filter: blur(14px); transform: translate3d(2%, 3.5%, 0); will-change: transform; pointer-events: none; }
.charm-floor { position: absolute; left: 50%; bottom: -3%; width: 56%; height: 6%; margin-left: -28%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(60, 26, 10, .26), rgba(60, 26, 10, .1) 55%, rgba(60, 26, 10, 0)); will-change: transform; }
.charm-light { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 320 / 560; overflow: hidden; pointer-events: none;
  -webkit-mask-image: var(--silk-mask); mask-image: var(--silk-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.charm-light i { position: absolute; left: 14%; top: 38%; width: 50%; height: 34%; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side, rgba(255, 236, 214, .17), rgba(255, 236, 214, .05) 60%, rgba(255, 236, 214, 0)); }
.is-off .charm-light, .tie-in .charm-light { opacity: .4; }
.is-off .charm-cast, .tie-in .charm-cast { opacity: .7; }

/* 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); }
.n15 { --top: var(--n1); --bot: var(--n5); }   /* v5c: the FAQ follows the locks directly */
.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) and (pointer: fine) { .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: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; }
}

/* ---------- v5: the charm's light keeps the dark out ----------
   Lantern aura while tied (glow plus slow light rings), a bloom when the knot cinches. When untied, faint ink-smoke wisps
   (pre-rendered WebP) creep in from the hero's edges and stay in the margins; the next tie pushes them back. site.js runs
   the wisps and the bloom; CSS holds the resting states. Transform and opacity only; nothing here repaints. */
.hero .wrap { z-index: 1; }
.wisps { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wp { position: absolute; left: 0; display: block; width: var(--ww); aspect-ratio: 640 / 300; }
.wp.r { left: auto; right: 0; }
.wp .wd { display: block; width: 100%; height: 100%; }
.wp b { display: block; width: 100%; height: 100%; opacity: 0; transform: translate3d(-100%, 0, 0); will-change: transform, opacity;
  background: center / 100% 100% no-repeat; }
.wp.r b { transform: scaleX(-1) translate3d(-100%, 0, 0); }
.wisps.ready .ia { background-image: url(img/wisp-a.webp); }
.wisps.ready .ib { background-image: url(img/wisp-b.webp); }
.w1 { top: 5%; --ww: min(38vw, 560px); } .w2 { top: 20%; --ww: min(34vw, 500px); } .w3 { top: 70%; --ww: min(30vw, 440px); } .w4 { top: 76%; --ww: min(32vw, 460px); }   /* beside the charm, then below the H1 beside the lede and buttons */
@media (max-width: 899px) {
  /* phone and tablet: only beside the charm, above the status line */
  .w1 { top: 7%; --ww: 44vw; } .w2 { top: 17%; --ww: 40vw; } .w3 { top: 27%; --ww: 38vw; } .w4 { display: none; }
}
.hero.wisping .wp .wd { animation: wisp-drift 9s ease-in-out infinite alternate; }
.hero.wisping .w2 .wd, .hero.wisping .w4 .wd { animation-duration: 11s; animation-direction: alternate-reverse; }
@keyframes wisp-drift { from { transform: translate3d(0, -6px, 0) rotate(-1.2deg); } to { transform: translate3d(0, 7px, 0) rotate(1.4deg); } }
.idle-off .wp .wd { animation-play-state: paused; }

.charm-aura, .charm-bloom { position: absolute; left: 50%; top: 61%; width: 132%; aspect-ratio: 1; margin: -66% 0 0 -66%; pointer-events: none; transition: opacity 1.1s cubic-bezier(.3, 0, .2, 1); }
.charm-aura i, .charm-bloom i { position: absolute; inset: 0; border-radius: 50%; will-change: transform, opacity; }
.charm-aura i { opacity: 0; background: radial-gradient(closest-side, rgba(255, 233, 190, 0) 64%, rgba(246, 214, 150, .62) 72%, rgba(255, 233, 190, 0) 82%);
  animation: aura-ring 7.5s cubic-bezier(.3, 0, .4, 1) infinite; }
.charm-aura i:nth-child(2) { animation-delay: 2.5s; } .charm-aura i:nth-child(3) { animation-delay: 5s; }
@keyframes aura-ring { 0% { opacity: 0; transform: scale(.42); } 22% { opacity: .9; } 100% { opacity: 0; transform: scale(1.3); } }
.charm-bloom i { opacity: 0; background: radial-gradient(closest-side, rgba(255, 238, 200, .75), rgba(255, 230, 182, .32) 45%, rgba(255, 230, 182, 0)); }
.charm-glow i { background: radial-gradient(closest-side, rgba(255, 236, 196, .98), rgba(252, 226, 176, .6) 45%, rgba(252, 226, 176, 0) 100%); }
.is-off .charm-aura, .tie-in .charm-aura { opacity: 0; }
.idle-off .charm-aura i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .wisps { display: none; }
  .charm-aura i { animation: none; } .charm-aura i:first-child { opacity: .7; transform: scale(.92); }
}

/* tile: app icons, ink wisps reach in from the sides, a tiny charm's light pushes them back (7 s loop, only with JS, only in view) */
.ward-fig { position: relative; height: 170px; overflow: hidden; margin: 2px -6px 0; border-radius: 10px; }
.wf-row { position: absolute; left: 50%; bottom: 14px; display: flex; gap: 10px; transform: translateX(-50%); z-index: 2; }
.wf-ic { display: block; width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 16px 2px rgba(252, 222, 166, .55); }
.wf-ic svg { display: block; width: 100%; height: 100%; }
.wf-ic .sq { fill: var(--ink); }
.wf-ic .gl { fill: none; stroke: var(--paper-3); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wf-ic .gl .f { fill: var(--paper-3); stroke: none; }
.wf-charm { position: absolute; left: 50%; top: 8px; width: 34px; margin-left: -17px; z-index: 2; }
.wf-charm svg { display: block; width: 100%; height: auto; }
.wf-charm .cd { fill: none; stroke: #c9ab72; stroke-width: 2.2; stroke-linecap: round; }
.wf-charm .pch { fill: var(--pouch); stroke: #8f2412; stroke-width: 1; }
.wf-charm .pn { fill: var(--paper-3); stroke: #b48a46; stroke-width: .8; }
.wf-charm .kn { fill: none; stroke: #e6d3a6; stroke-width: 2.4; stroke-linecap: round; }
.wf-charm .kj { font: 400 11px/1 var(--f-brush); fill: var(--ink); text-anchor: middle; }
.wf-charm .kn { stroke-width: 1.6; }
.wf-light { position: absolute; left: 50%; top: 46%; width: 330px; height: 190px; margin: -95px 0 0 -165px; border-radius: 50%; z-index: 1; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(255, 236, 196, .95), rgba(252, 226, 176, .45) 50%, rgba(252, 226, 176, 0)); opacity: .7; }
.wf-w { position: absolute; bottom: 0; left: 0; width: 50%; aspect-ratio: 640 / 300; z-index: 0; display: block; }   /* level with the icon row */
.wf-w.r { left: auto; right: 0; transform: scaleX(-1); }
.wf-w b { display: block; width: 100%; height: 100%; background: url(img/wisp-a.webp) center / 100% 100% no-repeat; opacity: 0; transform: translate3d(-100%, 0, 0); will-change: transform, opacity; }
.wf-w.r b { background-image: url(img/wisp-b.webp); }
html.js .ward-fig .wf-w b { animation: wf-reach 7s cubic-bezier(.4, 0, .3, 1) infinite; }
html.js .ward-fig .wf-w.r b { animation-delay: -.6s; }
html.js .ward-fig .wf-light { animation: wf-pulse 7s ease-in-out infinite; }
.ward-fig.hold .wf-w b, .ward-fig.hold .wf-light { animation-play-state: paused; }
@keyframes wf-reach { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } 36% { opacity: .62; transform: translate3d(-28%, 0, 0); }
  50% { opacity: .62; transform: translate3d(-22%, 0, 0); } 60% { opacity: .25; transform: translate3d(-62%, -3%, 0) scale(1.12); }
  72%, 100% { opacity: 0; transform: translate3d(-96%, -3%, 0) scale(1.2); } }
@keyframes wf-pulse { 0%, 46% { opacity: .7; transform: scale(.92); } 55% { opacity: 1; transform: scale(1.14); } 72% { opacity: .82; transform: scale(1); } 100% { opacity: .7; transform: scale(.92); } }
@media (max-width: 600px) { .ward-fig { height: 150px; } .wf-ic { width: 40px; height: 40px; } .wf-row { gap: 8px; } .wf-light { width: 290px; height: 170px; margin: -85px 0 0 -145px; } }
@media (prefers-reduced-motion: reduce) { .ward-fig .wf-w { display: none; } html.js .ward-fig .wf-light { animation: none; } }

/* v5c closing block: the install decision in one place. Small glowing charm, the line, three plan cards, both buttons, the small print.
   Cards: name, price and trial share rows (grid), so label and price always sit level; they stack on phones. */
.final { text-align: center; }
.final .wrap { display: flex; flex-direction: column; align-items: center; gap: 0; }
.final h2 { font-size: clamp(2.25rem, 5vw, 4rem); max-width: 16ch; margin-top: 18px; }
.fin-charm { position: relative; width: 46px; }
.fin-charm svg { position: relative; display: block; width: 100%; height: auto; }
.fin-glow { position: absolute; left: 50%; top: 58%; width: 190px; aspect-ratio: 1; margin: -95px 0 0 -95px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 238, 200, .95), rgba(252, 226, 176, .45) 48%, rgba(252, 226, 176, 0)); animation: glow-breathe 9s ease-in-out infinite alternate; }
.plans { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 168px)); gap: 14px; justify-content: center; }
.pc { display: grid; grid-template-rows: auto auto auto; justify-items: center; align-content: start; gap: 6px; padding: 18px 14px 16px;
  background: rgba(255, 250, 241, .62); border: 1px solid var(--line); border-radius: 14px; }
.pc h3 { font-size: 1.125rem; margin: 0; }
.pc .amt { margin: 0; font: 800 1.75rem/1.1 var(--f-display); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.pc .amt small { display: block; font: 400 0.875rem/1.3 var(--f-body); color: var(--ink-2); margin-top: 2px; }
.pc .trial { margin: 2px 0 0; font: 700 0.8125rem/1.3 var(--f-body); color: var(--shu-deep); }
.final .cta { margin-top: 30px; justify-content: center; }
.fin-note { margin: 16px 0 0; color: var(--ink-2); font-size: 0.875rem; max-width: 46ch; }
@media (max-width: 600px) {
  .plans { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 360px; gap: 10px; }
  .pc { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; justify-items: start; align-items: baseline; text-align: left; padding: 14px 16px; column-gap: 12px; row-gap: 2px; }
  .pc h3 { grid-column: 1; grid-row: 1; }
  .pc .amt { grid-column: 2; grid-row: 1 / span 2; justify-self: end; text-align: right; font-size: 1.5rem; }
  .pc .trial { grid-column: 1; grid-row: 2; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .fin-glow { animation: none; opacity: .8; } }
@media (max-width: 420px) { .seg button { padding: 8px 11px; } }   /* four cooldown chips fit at 360 */

/* ---------- v5d: nothing wraps for no reason, grids use the full width ---------- */
.sec h2, .feats h2, .final h2 { max-width: none; text-wrap: balance; }
.sec .intro, .faq-note, .lock-foot, .fin-note, .hero .lede { max-width: none; text-wrap: pretty; }
@media (min-width: 900px) {
  /* section heads centred over full-width content, so no block hangs left beside empty space */
  .feats .wrap > h2, .locks .wrap > h2, .locks .intro, .lock-foot, #faq .wrap > h2, #faq .faq-note, #guides .wrap > h2, #guides .intro, #guides .faq-note, #guides .more { text-align: center; margin-left: auto; margin-right: auto; }
  .faq { max-width: 960px; margin-left: auto; margin-right: auto; }
  .faq details p { max-width: none; }
}
/* features: the Japanese tile two columns wide, privacy one full row, so headings stay on one line and no cell is left empty */
@media (min-width: 720px) {
  .ft-jp { grid-column: span 2; }
  .ft-acct { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); column-gap: 36px; align-items: center; }
  .ft-acct .ft-art { grid-row: 1 / span 3; }
  .ft-acct h3 { margin-top: 0; align-self: end; }
  .ft-acct p { align-self: start; }
}
@media (max-width: 719px) { .ft-isearch, .ft-acct { grid-column: 1 / -1; } }
.plans { grid-template-columns: repeat(3, minmax(0, 220px)); gap: 18px; }
@media (max-width: 600px) { .plans { grid-template-columns: minmax(0, 1fr); } }
/* guides: cards across the full width (3 columns from 720px, 1 on phones) */
.glist { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.glist a { display: grid; gap: 6px; height: 100%; box-sizing: border-box; }
.glist a b { font-weight: 700; line-height: 1.3; }
.glist a span { font-weight: 400; font-size: 0.875rem; line-height: 1.45; color: #5a4d43; text-wrap: pretty; }
.glist li { display: flex; } .glist li > a { flex: 1; }
@media (max-width: 719px) { .glist { grid-template-columns: minmax(0, 1fr); } }

/* ---------- v5d: hover life (mouse only). Transform, opacity, shadow and colour only; no layout shift ---------- */
.faq summary { margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 10px; transition: background-color .25s var(--ease); }
.btn:active { transform: scale(.97); }
.nav ul a { position: relative; }
.nav ul a::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 1px; height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6C20 2.2 45 2.6 70 2.9 85 3.1 95 3.3 99 2.6' fill='none' stroke='%23c3371f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s cubic-bezier(.3, .7, .2, 1); pointer-events: none; }
.glist li::before { transform-origin: 0 50%; transition: transform .3s var(--ease); }
.charm-glow { transition: opacity .9s cubic-bezier(.3, 0, .2, 1), transform .6s var(--ease), filter .6s var(--ease); }
.feat-light { position: absolute; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 228, 176, .34), rgba(255, 228, 176, .12) 50%, rgba(255, 228, 176, 0)); will-change: transform, opacity; transition: opacity .5s var(--ease); }
.feats.lit .feat-light { opacity: 1; }
.feats .wrap { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .ft, .pc { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
  .ft:hover, .pc:hover { transform: translateY(-4px); box-shadow: 0 22px 36px -22px rgba(70, 36, 12, .42), 0 0 0 1px rgba(232, 196, 130, .55); }
  .btn { transition: background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease), box-shadow .3s var(--ease); }
  .btn:hover { box-shadow: 0 0 0 4px rgba(252, 222, 166, .38), 0 12px 28px -12px rgba(214, 150, 60, .6); }
  .nav ul a:hover { text-decoration: none; color: var(--ink); }
  .nav ul a:hover::after { transform: scaleX(1); }
  .faq summary:hover { background-color: rgba(243, 235, 222, .06); }
  .faq details:not([open]) summary:hover svg { transform: rotate(90deg); }
  .glist li:hover::before { transform: scaleX(1.9); }
  .charm-btn:hover .charm-glow { transform: translate(-50%, -50%) scale(1.07); filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .ft:hover, .pc:hover, .glist li:hover { transform: none !important; }
  .nav ul a::after, .glist li::before, .faq summary svg { transition: none; }
  .charm-btn:hover .charm-glow { transform: translate(-50%, -50%); }
  .feat-light { display: none; }
}

/* v5d ensō: solid ink with rough edges (drawn in site.js), no pale track, no grain over the whole stroke */
.enso .track { display: none; }
.enso .time { white-space: nowrap; }

/* ---------- v5d: Japanese tile = a noren tied shut (owner's pick D) ---------- */
.ft-art.nr { aspect-ratio: 330 / 172; max-height: 200px; }
.nr-cloth { fill: url(#nrCloth); }
.nr-label { font: 800 18px/1 var(--f-display); letter-spacing: .03em; fill: #f3ead9; text-anchor: middle; }
.nr-folds path { fill: none; stroke: #f6efe2; stroke-opacity: .09; stroke-width: 1.2; }
.nr-rod { fill: #9a7c48; }
.nr-cord-u { fill: none; stroke: #9a7c48; stroke-width: 6; stroke-linecap: round; }
.nr-cord-t { fill: none; stroke: #efe1bf; stroke-width: 3.2; stroke-linecap: round; }
.nr-knot { fill: #efe1bf; stroke: #9a7c48; stroke-width: 1.4; }
.nr-seal { font: 400 17px/1 var(--f-brush); fill: #f6efe2; }
.nr-sway { transform-box: view-box; transform-origin: 50% 6%; --an: nr-sway; }
.nr-cinch { transform-box: fill-box; transform-origin: 50% 30%; --an: nr-cinch; }
@keyframes nr-sway { 0% { transform: rotate(0); } 30% { transform: rotate(-1.3deg); } 62% { transform: rotate(.8deg); } 85% { transform: rotate(-.3deg); } 100% { transform: none; } }
@keyframes nr-cinch { 0% { transform: scale(1.14); } 55% { transform: scale(.9); } 78% { transform: scale(1.03); } 100% { transform: none; } }

/* ---------- v5d: lock tile = tap "Turn off", a brush timer ring draws round it, "Wait 30:00" (owner's pick L3) ---------- */
.ft-art.lk { aspect-ratio: 300 / 190; max-height: 214px; }
.lk-ring { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; }
.lk-btn { fill: var(--ink); }
.lk-btn-t { font: 700 15px/1 var(--f-body); fill: var(--paper-3); text-anchor: middle; }
.lk-thumb { fill: #fbf6ec; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.lk-wait-t { font: 800 18px/1 var(--f-display); fill: var(--shu-deep); }
.lk-press { transform-box: fill-box; transform-origin: 50% 50%; --an: lk-press; }
.lk-tap { transform-box: fill-box; transform-origin: 30% 20%; --an: lk-tap; }
@keyframes lk-tap { 0% { opacity: 0; transform: translate(26px, 30px); } 40% { opacity: 1; transform: translate(4px, 6px); } 62% { transform: translate(0, 0) scale(.94); } 82% { transform: translate(2px, 3px); } 100% { opacity: 1; transform: none; } }
@keyframes lk-press { 0% { transform: none; } 45% { transform: scale(.95); } 100% { transform: none; } }
.lk-chip-bg { fill: #fffaf1; stroke: rgba(28, 23, 20, .25); }
.lk-chip-t { font: 700 12.5px/1 var(--f-body); fill: var(--ink); text-anchor: middle; }
.lk-ic { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.lk-ic-caret { stroke: var(--ink); stroke-width: 1.4; }
.lk-ic-dot { fill: var(--ink); }
/* resting state (no JS, reduced motion): the Cooldown chip is the lit one */
.c1 .lk-chip-bg { fill: var(--ink); stroke: var(--ink); } .c1 .lk-chip-t { fill: var(--paper-3); } .c1 .lk-ic { stroke: var(--paper-3); }
/* the chips light in turn, each shows its little demo, 9 s loop; only with JS, only while the tile is on screen */
@media (prefers-reduced-motion: no-preference) {
  html.js .lk-chip .lk-chip-bg { animation: lk-bg 9s infinite; } html.js .lk-chip .lk-chip-t { animation: lk-tx 9s infinite; }
  html.js .lk-chip .lk-ic { animation: lk-ic 9s infinite; } html.js .lk-chip .lk-ic-dot, html.js .lk-chip .lk-ic-caret { animation: lk-dot 9s infinite; }
  html.js .lk-chip .lk-ic-ring, html.js .lk-chip .lk-ic-line { stroke-dasharray: 1 2; animation: lk-ic 9s infinite, lk-draw 9s infinite; }
  html.js .c2 * { animation-delay: 3s !important; } html.js .c3 * { animation-delay: 6s !important; }
  html.js .c3 .d1 { animation-delay: 6.25s !important; } html.js .c3 .d2 { animation-delay: 6.5s !important; } html.js .c3 .d3 { animation-delay: 6.75s !important; }
  html.js .c2 .lk-ic-caret { animation: lk-caret 9s infinite; }
  .ft.hold .lk-chip * { animation-play-state: paused; }
}
@keyframes lk-bg { 0%, 31% { fill: #1c1714; stroke: #1c1714; } 34%, 97% { fill: #fffaf1; stroke: rgba(28, 23, 20, .25); } 100% { fill: #1c1714; stroke: #1c1714; } }
@keyframes lk-tx { 0%, 31% { fill: #fbf6ec; } 34%, 97% { fill: #1c1714; } 100% { fill: #fbf6ec; } }
@keyframes lk-ic { 0%, 31% { stroke: #fbf6ec; } 34%, 97% { stroke: #1c1714; } 100% { stroke: #fbf6ec; } }
@keyframes lk-draw { 0% { stroke-dashoffset: 1; } 20%, 100% { stroke-dashoffset: 0; } }
@keyframes lk-dot { 0% { fill: #fbf6ec; stroke: #fbf6ec; opacity: 0; } 4%, 31% { opacity: 1; fill: #fbf6ec; stroke: #fbf6ec; } 34%, 100% { opacity: 1; fill: #1c1714; stroke: #1c1714; } }
@keyframes lk-caret { 0%, 31% { stroke: #fbf6ec; opacity: 1; } 15% { opacity: 0; } 34%, 100% { stroke: #1c1714; opacity: 1; } }
/* phone: the lock demo needs the full width to stay readable; the grid fills the gap it leaves */
@media (max-width: 719px) { .ft-grid { grid-auto-flow: dense; } .ft-lock { grid-column: 1 / -1; } .ft-art.lk { max-height: 200px; } }

/* ---------- v5d bento (owner): big = lock and every browser and app; wide = Japanese sites; four small; privacy strip ----------
   Order: lock, apps, Japanese sites, guard, SafeSearch, block list, in-app searches, privacy. No gaps or ragged rows. */
.ft-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ft-grid > .ft { grid-column: auto; }
.ft-grid > .ft-lock, .ft-grid > .ft-apps, .ft-grid > .ft-jp, .ft-grid > .ft-acct { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .ft-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ft-grid > .ft-lock, .ft-grid > .ft-apps { grid-column: span 2; }
  .ft-lock .ft-art.lk { max-height: 250px; }
}
/* the two strips: art beside the words from tablet up */
@media (min-width: 720px) {
  .ft-jp, .ft-acct { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 40px; align-items: center; }
  .ft-jp .ft-art, .ft-acct .ft-art { grid-row: 1 / span 3; }
  .ft-jp h3, .ft-acct h3 { margin-top: 0; align-self: end; }
  .ft-jp p, .ft-acct p { align-self: start; }
  .ft-acct .ft-art { max-height: 170px; }
}
@media (max-width: 719px) { .ft-grid > .ft-isearch { grid-column: auto; } }

/* ---------- v5e: tiles you can try ---------- */
.try-tag { position: absolute; top: 12px; right: 14px; font: 500 13px/1 var(--f-body); color: var(--ink-3); letter-spacing: .02em; pointer-events: none; }
.try-say { min-height: 1.4em; margin: 6px 0 0; font: 700 13px/1.4 var(--f-body); color: var(--shu-deep); text-align: center; }
.ft :is(button, input):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* lock */
.lkx { display: grid; gap: 10px; }
.lkx-stage { position: relative; height: 196px; }
.lkx-p { position: absolute; inset: 0; display: grid; place-items: center; }
.lkx-p[hidden] { display: none; }
.lkx-ring { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; pointer-events: none; }
.lkx-ink { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0 1; }
.lkx-off { position: relative; z-index: 1; min-width: 112px; height: 46px; padding: 0 20px; border: 0; border-radius: 23px; background: var(--ink); color: var(--paper-3);
  font: 700 15px/1 var(--f-body); cursor: pointer; transition: transform .12s var(--ease), background-color .2s var(--ease); }
.lkx-off:active { transform: scale(.96); }
.lkx-off.done { background: var(--shu-deep); }
.lkx-thumb { position: absolute; left: calc(50% + 18px); top: calc(50% + 6px); width: 52px; height: 52px; pointer-events: none; fill: #fbf6ec; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; opacity: 0; }
.lkx.auto .lkx-thumb { opacity: 1; }
.lkx-wait { position: absolute; left: calc(50% + 96px); top: 50%; transform: translateY(-50%); display: grid; gap: 2px; font: 800 18px/1.1 var(--f-display); color: var(--shu-deep); opacity: 0; transition: opacity .3s var(--ease); }
.lkx-wait .lkx-t { font-variant-numeric: tabular-nums lining-nums; }
.lkx.waiting .lkx-wait, .lkx.auto[data-mode="cool"] .lkx-wait { opacity: 1; }
@media (max-width: 420px) { .lkx-wait { left: auto; right: 0; } }
.lkx-target { margin: 0 0 12px; font: 800 22px/1.2 var(--f-display); color: color-mix(in srgb, var(--ink) 28%, transparent); letter-spacing: .02em; }
.lkx-target b { color: var(--ink); font-weight: 800; transition: color .15s; }
.lkx-in { width: min(100%, 260px); height: 46px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fffaf1; color: var(--ink); font: 500 16px/1 var(--f-body); }
.lkx-in.shiver { animation: lkx-shiver .32s; border-color: var(--shu); }
@keyframes lkx-shiver { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.lkx-p.lkx-phr, .lkx-p.lkx-pin { align-content: center; }
.lkx-dots { display: flex; gap: 12px; justify-content: center; margin-bottom: 12px; }
.lkx-dots i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--ink); transition: background-color .15s, transform .15s; }
.lkx-dots i.on { background: var(--ink); transform: scale(1.1); }
.lkx-keys { display: grid; grid-template-columns: repeat(6, 44px); gap: 6px; justify-content: center; }
.lkx-k { height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fffaf1; color: var(--ink); font: 500 17px/1 var(--f-body); cursor: pointer; }
.lkx-k:active { background: var(--paper-2); }
.lkx-del { font-size: 13px; }
.lkx-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lkx-chip { display: grid; justify-items: center; gap: 4px; min-height: 52px; padding: 8px 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fffaf1; color: var(--ink);
  font: 700 13px/1.1 var(--f-body); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.lkx-chip svg { width: 20px; height: 14px; }
.lkx-chip .ci { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .lkx-chip .ci.thin { stroke-width: 1.4; } .lkx-chip .cd { fill: currentColor; }
.lkx-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper-3); border-color: var(--ink); }
.lkx-say { min-height: 1.4em; }
/* every browser and app */
.ward-fig .wf-ic { padding: 0; border: 0; background: none; cursor: pointer; transition: transform .15s var(--ease); }
.ward-fig .wf-ic:active { transform: scale(.94); }
.wf-18 { font: 800 14px/1 var(--f-body); fill: #ec7a5f; text-anchor: middle; }
.ward-fig.used .wf-w b { animation: none; opacity: 0; }
.wf-pop { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.wf-page { position: absolute; width: 66px; padding: 6px 6px 7px; background: #fffaf1; border: 1px solid rgba(28, 23, 20, .38); border-radius: 6px; box-shadow: 0 4px 8px -4px rgba(60, 30, 12, .35);
  font: 500 13px/1.1 var(--f-body); color: var(--ink); text-align: center; transform-origin: 50% 100%; }
.wf-page::before { content: ""; display: block; height: 18px; margin-bottom: 5px; border-radius: 3px; background: var(--paper-2); }
.wf-fly { position: absolute; width: 96px; aspect-ratio: 640 / 300; margin: -22px 0 0 -10px; background: url(img/wisp-b.webp) center / 100% 100% no-repeat; opacity: .8; }
.wf-no { position: absolute; font: 700 13px/1 var(--f-body); color: var(--shu-deep); white-space: nowrap; }
@media (max-width: 600px) { .ward-fig .wf-ic { width: 44px; height: 44px; } .wf-row { gap: 6px; } }
/* noren */
.nr-wrap { position: relative; }
.nr-tug { position: absolute; left: 10%; right: 10%; top: 4%; bottom: 0; border: 0; background: none; cursor: grab; touch-action: pan-y; border-radius: 12px; }
.nr-tug:active { cursor: grabbing; }
.nr-wrap .try-say { position: absolute; left: 0; right: 0; bottom: -6px; margin: 0; }
@media (min-width: 720px) { .ft-jp .nr-wrap, .ft-acct .pvx { grid-row: 1 / span 3; } }
.nr-pull { transform-box: view-box; transform-origin: 50% 6%; }
.nr-sealp { transform-box: fill-box; transform-origin: 50% 50%; }
.nr-sealp.pulse { animation: nr-pulse .6s cubic-bezier(.3, .7, .3, 1); }
@keyframes nr-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* uninstall guard */
.ugx { display: grid; justify-items: center; gap: 2px; padding-top: 16px; }
.ugx-row { display: flex; align-items: center; justify-content: space-between; width: min(100%, 220px); }
.ugx-app { position: relative; width: 60px; height: 60px; padding: 10px 13px 9px; border: 0; border-radius: 15px; background: var(--ink); cursor: grab; touch-action: pan-y; --mk-out: var(--paper-3); --mk-in: var(--ink); --mk-tor: var(--paper-3); }
.ugx-app svg { width: 100%; height: 100%; display: block; }
.ugx-cord { position: absolute; left: -8px; right: -8px; top: 36px; height: 5px; border-radius: 3px; background: #efe1bf; box-shadow: 0 0 0 1.2px #9a7c48; }
.ugx-bin { display: grid; justify-items: center; gap: 4px; width: 66px; padding: 8px 4px; border: 1.5px dashed var(--line-strong); border-radius: 12px; font: 500 13px/1 var(--f-body); color: var(--ink-3); }
.ugx-bin svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ugx-bin.near { border-color: var(--shu); color: var(--shu-deep); }
.ugx-note { margin: 0; font: 400 13px/1.35 var(--f-body); color: var(--ink-3); text-align: center; }
/* SafeSearch */
.ssx { display: grid; justify-items: center; gap: 12px; padding-top: 18px; }
.ssx-field { display: flex; align-items: center; gap: 8px; width: min(100%, 200px); height: 34px; padding: 0 12px; border: 1.4px solid rgba(28, 23, 20, .38); border-radius: 17px; background: #fffaf1; box-sizing: border-box; }
.ssx-field svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; flex: none; }
.ssx-field i { flex: 1; height: 0; border-top: 2.2px dashed var(--ink-2); }
.ssx-sw { width: 72px; height: 46px; padding: 0; border: 0; background: none; cursor: pointer; }
.ssx-track { display: block; position: relative; width: 60px; height: 32px; margin: 0 auto; border-radius: 16px; background: var(--shu); }
.ssx-knob { position: absolute; left: 31px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fffaf1; box-shadow: 0 1px 2px rgba(28, 23, 20, .3); }
/* block list */
.blx-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.blx-row, .blx-add { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fffaf1; color: var(--ink); font: 500 14px/1 var(--f-body); cursor: pointer; text-align: left; }
.blx-ic { width: 14px; height: 14px; border-radius: 4px; background: var(--ink-3); flex: none; }
.blx-n { flex: 1; }
.blx-st::before { font: 800 16px/1 var(--f-body); }
.blx-row[data-s="b"] .blx-st::before { content: "\00d7"; color: var(--shu); }
.blx-row[data-s="a"] .blx-st::before { content: "\2713"; color: #3d7a4e; }
.blx-add { justify-content: center; border-style: dashed; color: var(--ink-2); }
.blx-add:disabled { cursor: default; opacity: .6; }
.blx-new { animation: blx-in .3s var(--ease); }
@keyframes blx-in { from { opacity: 0; transform: translateY(4px); } }
/* searches inside apps */
.isx { display: grid; gap: 8px; padding-top: 16px; }
.isx-bar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border: 1.4px solid rgba(28, 23, 20, .38); border-radius: 23px; background: #fffaf1; }
.isx-bar svg { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; flex: none; }
.isx-in { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: 500 16px/1 var(--f-body); outline: none; }
.isx-bar:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.isx-out { position: relative; display: grid; justify-items: center; align-content: center; height: 92px; }
.isx-lines { display: grid; gap: 9px; width: 100%; }
.isx-lines i { height: 9px; border-radius: 5px; background: var(--paper-2); } .isx-lines i:nth-child(2) { width: 80%; } .isx-lines i:nth-child(3) { width: 60%; }
.isx-seal { position: absolute; top: 4px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 4px; background: var(--shu); color: #f6efe2; font: 400 24px/1 var(--f-brush); transform: rotate(-8deg); opacity: 0; }
.isx.blocked .isx-lines { opacity: 0; } .isx.blocked .isx-seal { opacity: 1; }
.isx-say { position: absolute; bottom: 0; left: 0; right: 0; }
/* privacy */
.pvx { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.pvx .ft-art { transition: opacity .45s var(--ease); }
.pvx-say { position: absolute; inset: 0; display: grid; place-items: center; font: 700 14px/1.3 var(--f-body); color: var(--ink-2); opacity: 0; transition: opacity .45s var(--ease); }
.pvx[aria-pressed="true"] .ft-art { opacity: .08; } .pvx[aria-pressed="true"] .pvx-say { opacity: 1; }
/* plan cards */
.pc { cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); }
.pc[aria-checked="true"] { border-color: var(--ink); background: #fffaf1; box-shadow: 0 0 0 2px var(--ink); }
.pc:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .lkx-in.shiver, .nr-sealp.pulse, .blx-new { animation: none; } .lkx-off, .lkx-wait, .pvx .ft-art, .pvx-say, .pc { transition: none; } }

/* v5e fit: demos sit below the "Try it" tag and never grow wider than their tile */
.ft > * { min-width: 0; }
.lkx, .ugx, .ssx, .blx, .isx, .pvx, .nr-wrap { margin-top: 18px; }
.ward-fig { margin-top: 18px; }
.lkx, .isx { grid-template-columns: minmax(0, 1fr); }
.ugx { padding-top: 6px; }
.ugx-row { width: 100%; max-width: 240px; gap: 8px; }
.ugx-app { width: 54px; height: 54px; padding: 9px 11px 8px; flex: none; }
.ugx-cord { top: 32px; }
.ugx-bin { width: auto; min-width: 0; padding: 8px 8px; flex: none; }
.isx { padding-top: 4px; }
.isx-bar { min-width: 0; }
.isx-in { width: 100%; }
.ft .isx-in:focus-visible { outline: none; }   /* the bar shows the focus ring */

/* v5e logo (direction D): the light lockup in the header and footer, same height as before; the guard demo uses the charm mark */
.brand .lockup { display: block; height: 40px; width: auto; }
.foot .brand .lockup { height: 36px; }
.ugx-app img { display: block; height: 100%; width: auto; margin: 0 auto; }
/* the privacy demo's reply is not on screen until tapped */
.pvx-say { visibility: hidden; transition: opacity .45s var(--ease), visibility .45s; }
.pvx[aria-pressed="true"] .pvx-say { visibility: visible; }

/* v5e: the panel shows 守り only (logo D); the kana are a touch larger and centred in the panel */
.charm-svg .kana { font-size: 56px; }

/* v5f: the lock tile ring is the same ensō as the lock demo (shared brush path, same grain) */
.lkx-ring { width: 188px; height: 188px; margin: -94px 0 0 -94px; }
.lkx-ring { -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; }
.lkx-ink { fill: var(--ink); stroke: none; stroke-dasharray: none; fill-rule: evenodd; }
/* v5f: random phrases in a monospaced face so every character is unambiguous */
.phrase-target, .lkx-target, .lkx-in, #phrIn { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Roboto Mono", "Liberation Mono", monospace; letter-spacing: .04em; }
.phrase-target { font-size: 1.125rem; font-weight: 500; min-height: 1.6em; overflow-wrap: anywhere; }
.lkx-target { font-size: 22px; font-weight: 600; min-height: 1.2em; }
.lkx-target span { color: color-mix(in srgb, var(--ink) 30%, transparent); }
.phrase-target span.xtra { color: var(--shu-deep); text-decoration: underline wavy var(--shu); text-underline-offset: 4px; }
.phrase-target span.xtra:empty { display: none; }
.lkx-in.bad { border-color: var(--shu); }

/* v5f: no "Try it" tags. Demos sit closer to the top; on a mouse every control shows a pointer and a soft warm ring */
.lkx, .ugx, .ssx, .blx, .isx, .pvx, .nr-wrap, .ward-fig { margin-top: 4px; }
.ft :is(.lkx-off, .lkx-chip, .lkx-k, .wf-ic, .ugx-app, .ssx-sw, .blx-row, .blx-add, .pvx, .nr-tug) { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .ft :is(.lkx-off, .lkx-chip, .lkx-k, .wf-ic, .ugx-app, .ssx-sw, .blx-row, .blx-add) { transition: box-shadow .2s var(--ease), filter .2s var(--ease); }
  .ft :is(.lkx-off, .lkx-chip, .lkx-k, .wf-ic, .ugx-app, .blx-row, .blx-add):hover { box-shadow: 0 0 0 3px rgba(232, 196, 130, .55); }
  .ft .ssx-sw:hover .ssx-track { box-shadow: 0 0 0 3px rgba(232, 196, 130, .55); }
  .ft .pvx:hover .ft-art { filter: drop-shadow(0 4px 6px rgba(70, 36, 12, .22)); }
}

/* v5f: search tile. Result lines, then the reply in its own row (nothing overlaps); blocked shows the seal and the text as one unit */
.isx-out { position: static; display: grid; align-content: start; justify-items: stretch; gap: 12px; height: auto; min-height: 92px; }
.isx-msg { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 1.4em; }
.isx-say { position: static; margin: 0; min-height: 0; }
.isx-seal { position: static; display: none; flex: none; width: 22px; height: 22px; border-radius: 3px; font-size: 15px; }
.isx.blocked .isx-lines { display: none; }
.isx.blocked .isx-out { align-content: center; }
.isx.blocked .isx-seal { display: grid; }

/* v5f: jumps land on the heading, 16px below the sticky header (--hdr is the real header height, kept current by site.js).
   Headings carry the margin; without JS the section box is pulled up by its own top padding so the heading lands the same. */
:root { --hdr: 65px; --sec-pad: clamp(80px, 11vw, 160px); }
@media (max-width: 600px) { :root { --sec-pad: 64px; } }
.sec h2, .ft h3 { scroll-margin-top: 16px; }
.sec[id], .sec > .anchor { scroll-margin-top: calc(16px - var(--sec-pad)); }
.sec h2[tabindex="-1"]:focus, .ft h3[tabindex="-1"]:focus { outline: none; }
/* v5f: blocked search = the seal centred above the text (one unit at every width; the text wraps in narrow tiles) */
.isx-msg { flex-direction: column; gap: 8px; text-align: center; }
/* v5f: the curtain's reply gets its own row under the art instead of sitting on the hem */
.nr-wrap .try-say { position: static; margin: 4px 0 0; }
.nr-wrap .nr-tug { bottom: 1.6em; }
.isx-msg { min-height: 2.9em; } .isx.blocked .isx-msg { min-height: 0; }

/* v5f: local store prices (prices.js). Digits keep their width; a long currency shrinks to fit its card (site.js) */
[data-price] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc [hidden] { display: none !important; }
.ft .lkx-target { margin: 0 0 12px; font-size: 22px; font-weight: 600; line-height: 1.2; }   /* v5f: beats .ft p, which had shrunk the phrase to 14px */

.ml-scr .ml-ink { fill: #1c1714; fill-rule: evenodd; }
.ml-scr .ml-wet { fill: #050302; fill-rule: evenodd; opacity: 0; }
.ml-scr .ml-wash { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 212); height: calc(var(--u) * 212); margin: calc(var(--u) * -106) 0 0 calc(var(--u) * -106);
  border-radius: 50%; background: radial-gradient(circle at 50% 42%, #ece4d6, #e1d7c5); box-shadow: inset 0 0 0 1px rgba(28, 23, 20, .1); opacity: 0; transform: scale(.82); transition: opacity .6s; }
.ml.breathing .ml-wash { opacity: 1; animation: ml-breathe 8s ease-in-out infinite; }
@keyframes ml-breathe { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1); } }
.ml-scr .ml-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ml-scr .ml-t { display: flex; justify-content: center; height: 1em; font: 800 calc(var(--u) * 46)/1 var(--f-display); color: #1c1714; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.ml-scr .ml-t .dg { display: inline-block; position: relative; overflow: hidden; height: 1.1em; line-height: 1.1em; width: .64em; text-align: center; margin-top: -.05em; }
.ml-scr .ml-t .dg.cl { width: .3em; }
.ml-scr .ml-t .dg > span { display: block; }
.ml-scr .ml-t .dg > .nx { position: absolute; left: 0; top: 0; width: 100%; }
.ml-scr .ml-tl { margin: calc(var(--u) * 8) 0 0; font: 400 calc(var(--u) * 13)/1.45 var(--f-body); color: #6a5f55; }
.ml-scr .ml-texts { display: grid; margin-top: calc(var(--u) * 20); text-align: center; }
.ml-scr .ml-texts > div { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; }
.ml[data-cs="run"] .ml-ready, .ml:not([data-cs="run"]) .ml-run { visibility: hidden; }
.ml-scr .ml-urge { margin: 0; font: 800 calc(var(--u) * 16)/1.25 var(--f-display); color: #1c1714; }
.ml-scr .ml-br { margin-top: calc(var(--u) * 4); }
.ml-scr .ml-run .ml-sm:last-child { margin-top: calc(var(--u) * 8); }
.ml:not(.breathing) .ml-br { visibility: hidden; }

/* phrase */
.ml-scr .ml-p[data-p="phr"], .ml-scr .ml-p[data-p="pin"] { padding-top: calc(var(--u) * 24); }
.ml-scr .ml-slip { background: #fbf6ec; border: 1px solid rgba(28, 23, 20, .14); border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 16) calc(var(--u) * 18); }
.ml-scr .ml-phrase { margin: calc(var(--u) * 8) 0 0; min-height: 1.4em; font: 400 max(13px, calc(var(--u) * 17))/1.4 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Roboto Mono", "Liberation Mono", monospace;
  letter-spacing: .06em; color: rgba(28, 23, 20, .34); overflow-wrap: anywhere; }
.ml-scr .ml-phrase span { display: inline-block; }
.ml-scr .ml-phrase span.ok { color: #1c1714; }
.ml-scr .ml-phrase span.bad, .ml-scr .ml-phrase span.xtra { color: #c3371f; text-decoration: underline; text-decoration-color: #c3371f; text-underline-offset: 3px; }
.ml-scr .ml-phrase span.xtra:empty { display: none; }
.ml-scr .ml-field { position: relative; margin-top: calc(var(--u) * 14); }
.ml-scr .ml-flab { position: absolute; left: calc(var(--u) * 12); top: 0; transform: translateY(-50%); padding: 0 calc(var(--u) * 4); font: 400 calc(var(--u) * 12)/1 var(--f-body); color: #463d36;
  background: linear-gradient(#f2eadb 50%, #fbf6ec 50%); z-index: 1; }
.ml-scr .ml-in { display: block; width: 100%; height: max(44px, calc(var(--u) * 56)); padding: 0 calc(var(--u) * 16); border: 1px solid rgba(28, 23, 20, .32); border-radius: calc(var(--u) * 10);
  background: #fbf6ec; color: #1c1714; font: 400 max(16px, calc(var(--u) * 16))/1 var(--f-body); letter-spacing: .02em; }
.ml-scr .ml-in:focus { outline: none; border-color: #1c1714; box-shadow: inset 0 0 0 .4px #1c1714; }
.ml-scr .ml-in:focus-visible { outline: 2px solid #1c1714; outline-offset: 2px; }
.ml-scr .ml-field.err .ml-in { border-color: #9c2814; }
.ml-scr .ml-help { margin: calc(var(--u) * 4) 0 0; padding-left: calc(var(--u) * 16); min-height: 1.4em; font: 400 calc(var(--u) * 12)/1.4 var(--f-body); color: #6a5f55; white-space: nowrap; }
.ml-scr .ml-help.err { color: #9c2814; }
.ml-scr .ml-p[data-p="phr"] .ml-btn { margin-top: calc(var(--u) * 12); }

/* Partner PIN: ink drops and the phone's number keys (the app uses the system keyboard; it accepts no more digits than the PIN has) */
.ml-scr .ml-lead { margin: 0; font: 800 calc(var(--u) * 17)/1.25 var(--f-display); color: #1c1714; }
.ml-scr .ml-slip .ml-lead + .ml-sm { margin-top: calc(var(--u) * 6); }
.ml-scr .ml-dots { display: flex; justify-content: center; align-items: center; height: calc(var(--u) * 56); margin-top: calc(var(--u) * 16); }
.ml-scr .ml-dots i { position: relative; width: calc(var(--u) * 18); height: calc(var(--u) * 18); margin: 0 calc(var(--u) * 11); border-radius: 50%; box-shadow: inset 0 0 0 1.4px rgba(28, 23, 20, .32); }
.ml-scr .ml-dots i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #1c1714; transform: scale(0); transition: transform .36s cubic-bezier(.2, .7, .3, 1); }
.ml-scr .ml-dots i.on::after { transform: scale(1); }
.ml.pin-err .ml-dots i { box-shadow: inset 0 0 0 1.4px #c3371f; }
.ml.pin-err .ml-dots i::after { background: #c3371f; }
.ml-scr .ml-pmsg { margin: calc(var(--u) * 6) 0 0; min-height: 1.45em; text-align: center; font: 400 calc(var(--u) * 13)/1.45 var(--f-body); color: #6a5f55; }
.ml-scr .ml-pmsg.err { color: #9c2814; }
.ml-scr .ml-p[data-p="pin"] .ml-btn { margin-top: calc(var(--u) * 12); }
.ml-scr .ml-kb { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 10) calc(var(--u) * 8) calc(var(--u) * 14); background: #e9e8ef; }
.ml-scr .ml-k { height: max(44px, calc(var(--u) * 46)); border: 0; border-radius: calc(var(--u) * 23); background: #fff; color: #1c1714; cursor: pointer;
  font: 400 max(17px, calc(var(--u) * 24))/1 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; transition: opacity .15s, background-color .1s; }
.ml-scr .ml-k svg { width: max(20px, calc(var(--u) * 24)); height: max(20px, calc(var(--u) * 24)); fill: none; stroke: #1c1714; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ml-scr .ml-kdel, .ml-scr .ml-kok { background: #d8dcef; }
.ml-scr .ml-k:active:not(.dis) { background: #d6d6de; }
.ml-scr .ml-k.dis { opacity: .35; cursor: default; }
.ml-scr .ml-k.dis:active { background: #fff; }
.ml-scr .ml-kdel.dis:active, .ml-scr .ml-kok.dis:active { background: #d8dcef; }

/* the app's toast */
.ml-scr .ml-toast { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 16); margin: 0; padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 12); background: #1c1714; color: #f6efe2; font: 400 calc(var(--u) * 13)/1.4 var(--f-body); z-index: 2; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; }
.ml-scr .ml-toast.on { opacity: 1; visibility: visible; transform: none; }
.ml[data-m="pin"] .ml-toast { bottom: calc(4 * max(44px, var(--u) * 46) + var(--u) * 58); }
@media (prefers-reduced-motion: reduce) { .ml-scr .ml-toast, .ml-scr .ml-dots i::after, .ml-scr .ml-k, .ml-scr .ml-wash { transition: none; } .ml.breathing .ml-wash { animation: none; transform: none; } }

/* the tile: phone, then the chips and one fixed line (beside the phone when the tile is wide) */
.ft .lkx { display: block; container-type: inline-size; }
.lkx-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.lkx-side { flex: 1 1 200px; max-width: 340px; display: grid; gap: 10px; align-content: center; }
.lkx-side .lkx-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@container (min-width: 600px) { .lkx-side .lkx-chips { grid-template-columns: minmax(0, 1fr); } .lkx-side .lkx-chip { grid-auto-flow: column; justify-content: start; gap: 10px; padding: 8px 16px; } }
.ft .lkx-say { min-height: 2.8em; margin: 0; }

/* the section: tabs pick the lock, one fixed row above the phone (wait chips, or a note), one fixed status line below */
.panel-wrap.ml-host { min-height: 0; display: grid; justify-items: center; align-content: start; gap: 14px; padding: clamp(18px, 3vw, 36px) clamp(12px, 3vw, 36px); }
.ml-opt { display: grid; width: 100%; min-height: 46px; justify-items: center; align-items: center; }
.ml-opt > * { grid-area: 1 / 1; }
.ml-host:not([data-m="cool"]) .ml-opt .seg, .ml-host:not([data-m="phr"]) .ml-opt [data-for="phr"], .ml-host:not([data-m="pin"]) .ml-opt [data-for="pin"] { visibility: hidden; }
.ml-optp { margin: 0; color: var(--ink-2); font-size: .9375rem; text-align: center; }
.ml-host .status { min-height: 3.2em; margin: 0; text-align: center; max-width: 40ch; }
.ml-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; }
/* v5g: every reply line keeps room for two lines, so a message never moves the text below it */
.ft .try-say { min-height: 3.1em; }   /* two lines at .ft p's 1.55 line height */

/* v5g: nothing moves on interaction. Lines whose text changes keep a fixed box (full width, fixed height), so changing text
   never shifts the line or anything below it */
.charm-status { align-self: stretch; width: 100%; }
.ml-host .status { width: min(100%, 40ch); max-width: none; justify-self: center; }
.ml-scr .ml-tl { width: 100%; text-align: center; }
.ml-scr .ml-t { width: 100%; height: calc(var(--u) * 54); align-items: center; }
/* search tile: the blocked state keeps the result lines' space (hidden) and lays the seal over it, so the tile never changes height */
.isx-out { position: relative; }
.isx.blocked .isx-lines { display: grid; visibility: hidden; }
.isx.blocked .isx-out { align-content: start; }
.isx.blocked .isx-seal { position: absolute; left: 50%; top: 10px; margin-left: -12px; }
.ft .isx-msg { min-height: 3.1em; font-size: .9375rem; }
@media (max-width: 600px) { .ft .isx-msg { font-size: .875rem; } }

/* v5g (flagged, preview only): Your charm grows */
.grow .gw { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; margin-top: 36px; }
@media (min-width: 900px) { .grow .gw { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; } }
.gw-stage { position: relative; width: min(62vw, 300px); aspect-ratio: 320 / 660; touch-action: pan-y; }
.gw-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .45s cubic-bezier(.3, 0, .2, 1); }
.gw-layer.on { opacity: 1; }
.gw-glow { position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(var(--gs));
  background: radial-gradient(closest-side, rgba(255, 214, 150, calc(.62 * var(--gi))), rgba(255, 214, 150, calc(.2 * var(--gi))) 55%, rgba(255, 214, 150, 0)); }
.gw-svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.gw-kana { font-family: var(--f-brush); font-size: 50px; fill: #1c1714; text-anchor: middle; }
.gw-seal { font-family: var(--f-brush); font-size: 20px; fill: #fbf6ec; text-anchor: middle; }
.gw-ctl { width: min(100%, 460px); display: grid; gap: 10px; text-align: center; }
.gw-label { margin: 0; font: 800 1.5rem/1.2 var(--f-display); color: var(--ink); }
.gw-range { width: 100%; height: 44px; margin: 0; accent-color: var(--shu-deep); cursor: pointer; }
.gw-ticks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.gw-tick { min-height: 44px; padding: 4px 2px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--ink-2); font: 500 .8125rem/1.15 var(--f-body); cursor: pointer; touch-action: manipulation; }
.gw-tick[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.gw-tick:focus-visible, .gw-range:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gw-note { margin: 0; min-height: 4.65em; color: var(--ink-2); line-height: 1.55; }
.gw-cards { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.gw-cards li { background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px 20px; }
.gw-cards h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.gw-cards p { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.gw-sw { display: flex; gap: 6px; margin-top: 10px; }
.gw-sw i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.gw-reset { margin: 22px auto 0; max-width: 60ch; color: var(--ink-2); text-align: center; }
@media (prefers-reduced-motion: reduce) { .gw-layer { transition: none; } }

/* ---------- v5g scroll (scroll-craft rules by hand): transform and opacity only, set from one rAF; nothing covers text ---------- */
/* 2 the hero's smoke: two far layers at the top corners, one near layer at the bottom corner, pushed away by scrolling */
.smoke { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sm { position: absolute; display: block; aspect-ratio: 640 / 300; background: center / contain no-repeat; opacity: 0; will-change: transform, opacity; }
.smoke.ready .sm { background-image: url(img/wisp-a.webp); }
.smoke.ready .sm.r { background-image: url(img/wisp-b.webp); }
.sm-far.l { left: -7%; top: 11%; width: min(30vw, 400px); }
.sm-far.r { right: -7%; top: 19%; width: min(27vw, 360px); }
.sm-near { right: -16%; bottom: -3%; width: min(40vw, 520px); z-index: 1; }
.smoke .sm-far.l { --o: .32; } .smoke .sm-far.r { --o: .28; } .smoke .sm-near { --o: .42; }
.smoke.ready .sm { opacity: calc(var(--o) * var(--k, 1)); animation: sm-in 1.2s ease; }   /* no transition: scroll writes must not be eased */
@keyframes sm-in { from { opacity: 0; } }
@media (max-width: 600px) { .sm-far.l { left: -14%; top: 9%; width: 34vw; } .sm-far.r { right: -14%; top: 12%; width: 30vw; } .sm-near { display: none; } }
/* 1 the light spreads into the features; tiles catch it (warm edge light) */
.feat-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.feat-glow { position: absolute; left: 50%; top: 0; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(255, 224, 168, .5), rgba(255, 224, 168, .2) 45%, rgba(255, 224, 168, 0)); }
.feats .ft { transition: box-shadow .6s cubic-bezier(.3, 0, .2, 1); }
.feats .ft.lit { box-shadow: inset 0 1px 0 rgba(255, 252, 240, .95), 0 0 0 1px rgba(232, 196, 130, .5), 0 16px 36px -22px rgba(214, 150, 60, .55); }
/* 4 the hand-over bands: a cover in the outgoing colour shrinks as you scroll, so night pours down and dawn rises */
.band { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 20vw, 280px); pointer-events: none; z-index: 0; will-change: transform; }
/* v5k: both covers shrink toward their top, so the colour under them shows from the section edge up and always meets the next
   section's own colour (no cream strip left against the locks); the cover's moving lower edge fades instead of cutting */
.band-night { background: linear-gradient(rgba(242, 234, 219, 0), var(--paper) 22%, var(--paper) 45%, rgba(242, 234, 219, 0)); transform-origin: 50% 0; }
.band-dawn { background: linear-gradient(rgba(55, 34, 39, 0), var(--n6) 22%, var(--n6) 45%, rgba(55, 34, 39, 0)); transform-origin: 50% 0; height: clamp(150px, 20vw, 280px); }
@media (prefers-reduced-motion: reduce) {
  .band { display: none; }
  .sm-near { display: none; }
  .smoke.ready .sm { animation: none; }
  .feats .ft { transition: none; }
}

/* v5g (flagged with the app update): Free + Full protection */
.ft-tag { display: inline-block; align-self: flex-start; margin: 14px 0 -6px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(156, 40, 20, .35);
  color: var(--shu-deep); background: rgba(195, 55, 31, .06); font: 600 .75rem/1.3 var(--f-body); letter-spacing: .01em; }
.gw-cards .ft-tag { margin: 0 0 8px; }
.tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: min(100%, 980px); margin: 36px auto 0; text-align: left; }
@media (min-width: 900px) { .tiers { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: start; } }
.tier { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-panel); background: rgba(255, 250, 241, .62); }
.tier h3 { margin: 0; font-size: 1.25rem; }
.tier-amt { margin: 6px 0 0; font: 800 1.75rem/1.1 var(--f-display); color: var(--ink); }
.tier-list { margin: 12px 0 0; padding: 0 0 0 1.1em; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.tier-list li + li { margin-top: 4px; }
.tier-full .plans { margin: 14px 0 0; justify-content: start; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) { .tier-full .plans { grid-template-columns: minmax(0, 1fr); } }
.tier-add { margin: 16px 0 0; font-weight: 600; color: var(--ink); }
.ft .ft-note { margin: 2px 0 0; font-size: .8125rem; color: var(--shu-deep); }   /* v5g flagged: the lock tile note */
/* v5g: the lock tile is taller now (the app screen); the tile beside it centres its content instead of leaving a gap at the foot */
.seg .seg-fp { display: block; margin-top: 2px; font-size: .625rem; line-height: 1.1; letter-spacing: .01em; opacity: .8; }   /* v5g flagged: paid wait chips */
/* v5g: growth section (flagged): the note keeps room for four lines on narrow phones; the glow never widens the page */
@media (max-width: 420px) { .gw-note { min-height: 6.2em; } }
.grow { overflow-x: clip; }

/* ---------- v5g motion review (emilkowalski/skills rules) ---------- */
/* 1 FAQ: the box grows (rows below move with it), 220 ms open / 160 ms close, ease-out; the text fades in 4 px */
.faq details.unfold p, .faq details.unfold p::after { animation: none; }
.faq details { interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: clip; transition: height 160ms cubic-bezier(.23, 1, .32, 1), content-visibility 160ms allow-discrete; }
.faq details[open]::details-content { height: auto; transition-duration: 220ms; }
.faq details[open] p { animation: faq-in 180ms cubic-bezier(.23, 1, .32, 1) 40ms both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
/* 4 ease-out exits */
.pin-seal.lift { transition: opacity .15s cubic-bezier(.23, 1, .32, 1); }
/* 5 per-keystroke feedback: PIN drops from scale(.5) + fade, 140 ms */
.ml-scr .ml-dots i::after { transform: scale(.5); opacity: 0; transition: transform 140ms cubic-bezier(.23, 1, .32, 1), opacity 90ms linear; }
.ml-scr .ml-dots i.on::after { transform: none; opacity: 1; }
/* 6 calmer idle: one aura ring, no knot drift, the glint rests ~14 s between sweeps */
.charm-aura i:nth-child(n+2) { display: none; }
.charm-svg [data-knot] { animation: none; }
.glint i { animation: glint 16s cubic-bezier(.45, 0, .35, 1) 2.6s infinite; }
@keyframes glint { 0%, 88% { opacity: 0; transform: translateX(-110%) skewX(-12deg); } 90% { opacity: 1; } 98% { opacity: 1; } 100% { opacity: 0; transform: translateX(240%) skewX(-12deg); } }
/* 7 guide slips: stagger only the first five, shorter travel */
.glist.arm li { animation: slip-up .5s cubic-bezier(.23, 1, .32, 1) calc(min(var(--i, 0), 5) * 55ms) both paused; }
@keyframes slip-up { from { opacity: 0; transform: translateY(14px) rotate(var(--r, 0deg)); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }
/* 8b the tiles catch the light: a pre-rendered shadow layer fades in (opacity only, no box-shadow transition) */
.feats .ft { transition: none; }
.feats .ft.lit { box-shadow: none; }
.feats .ft::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s cubic-bezier(.23, 1, .32, 1);
  box-shadow: inset 0 1px 0 rgba(255, 252, 240, .95), 0 0 0 1px rgba(232, 196, 130, .5), 0 16px 36px -22px rgba(214, 150, 60, .55); }
.feats .ft.lit::after { opacity: 1; }
/* 8d the scroll smoke shows only while the charm is untied; the light pushes it back; none with reduced motion */
.smoke { transition: opacity .6s cubic-bezier(.23, 1, .32, 1); }
.hero:not(.wisping) .smoke, .hero.repel .smoke { opacity: 0; }
/* 10 tile lift 200 ms */
@media (hover: hover) and (pointer: fine) { .ft, .pc { transition: transform 200ms cubic-bezier(.23, 1, .32, 1), box-shadow 200ms cubic-bezier(.23, 1, .32, 1); } }
/* 11 UI durations under 300 ms with strong curves */
.tab-ink.ready { transition: transform 280ms cubic-bezier(.77, 0, .175, 1); }
.nav ul a::after { transition: transform 240ms cubic-bezier(.23, 1, .32, 1); }
.charm-glow { transition: opacity .9s cubic-bezier(.3, 0, .2, 1), transform 220ms cubic-bezier(.23, 1, .32, 1), filter 220ms cubic-bezier(.23, 1, .32, 1); }
.ml-scr .ml-toast { transition: opacity 200ms cubic-bezier(.23, 1, .32, 1), transform 200ms cubic-bezier(.23, 1, .32, 1), visibility 200ms; }
/* 2 the status words arrive with the seal (hidden only while the first tie plays) */
html.js .charm-status.pending .st-text, html.js .charm-status.pending .hint { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content { transition: none; } .faq details[open] p { animation: none; }
  .smoke { display: none; } .feats .ft::after { transition: none; }
}
.nr-wrap .nr-tug { bottom: 52px; }   /* v5g: the reply row is taller now; the invisible tug area ends above it */

/* ---------- v5h: one box system for the features grid ----------
   The big pair (lock, every browser and app) share one illustration box; the four small tiles share another. Content sits
   centred in its box; the reply line has a fixed height at the foot of the box; so every heading in a row starts on one line. */
:root { --say-h: 48px; --box-big: 330px; --box-sm: 244px; }
@media (max-width: 600px) { :root { --say-h: 44px; --box-big: 316px; --box-sm: 236px; } }
.ft .try-say { min-height: var(--say-h); margin: 0; }
/* lock tile: compact, no phone frame: the ensō with the time inside, the button under it, chips, the reply line */
.ft-lock .lkx { display: flex; flex-direction: column; gap: 10px; height: var(--box-big); margin-top: 4px; }
.ft-lock .lkx-stage { height: auto; flex: 1 1 auto; }
.ft-lock .lkx-chips { flex: none; }
.lkx-p.lkx-cool { display: grid; grid-auto-flow: row; justify-items: center; align-content: center; gap: 8px; place-items: center; }
.lkx-enso { position: relative; width: 156px; height: 156px; }
.lkx-enso .lkx-ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; }
.lkx-time { position: absolute; inset: 0; display: grid; place-items: center; font: 800 30px/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em; }
.lkx-thumb, .lkx-wait { display: none; }
@media (max-width: 600px) { .lkx-enso { width: 144px; height: 144px; } .lkx-time { font-size: 28px; } }
.lkx-k.dis, #keypad button.dis { opacity: .35; cursor: default; }
.lkx-k.dis:active, #keypad button.dis:active { background: inherit; transform: none; }
/* every browser and app: the same box; the charm and the icon row scaled up to fill it, wisps and light kept */
.ft-apps .ward-fig { height: calc(var(--box-big) - var(--say-h)); margin-top: 4px; }
.ft-apps .ward-fig + .try-say { margin: 0; }
.ft-apps .wf-charm { width: 54px; margin-left: -27px; top: 22px; }
.ft-apps .ward-fig .wf-ic { width: 56px; height: 56px; }
.ft-apps .wf-row { gap: 12px; bottom: 34px; }
.ft-apps .wf-light { width: 460px; height: 270px; margin: -135px 0 0 -230px; }
@media (max-width: 600px) { .ft-apps .ward-fig .wf-ic { width: 44px; height: 44px; } .ft-apps .wf-row { gap: 7px; bottom: 30px; } .ft-apps .wf-charm { width: 46px; margin-left: -23px; } .ft-apps .wf-light { width: 330px; height: 210px; margin: -105px 0 0 -165px; } }
/* the four small tiles: one box height, the art centred in it, the reply line at its foot */
.ft-guard .ugx, .ft-safe .ssx, .ft-list .blx, .ft-isearch .isx { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: var(--box-sm); margin-top: 4px; padding-top: 0; gap: 10px; }
.ft-guard .ugx > :first-child, .ft-safe .ssx > :first-child, .ft-list .blx > :first-child { margin-top: auto; }
.ft-guard .ugx > .try-say, .ft-safe .ssx > .try-say, .ft-list .blx > .try-say { margin-top: auto; }
.ft-isearch .isx { justify-content: center; }
.ft-isearch .isx > * { width: 100%; }
/* comparable visual weight: the guard and SafeSearch art scale up a little (their tap areas scale with them) */
.ft-guard .ugx-row { width: min(100%, 196px); transform: scale(1.15); transform-origin: 50% 50%; margin-bottom: 10px; }
.ft-safe .ssx-field, .ft-safe .ssx-sw { transform: scale(1.12); transform-origin: 50% 50%; }
/* the lock section: back to the v5f card. All three panels share one grid cell, so the card never changes height */
.locks .panel-wrap { display: grid; min-height: 0; }
.locks .panel-wrap > .lpanel { grid-area: 1 / 1; }
.locks .panel-wrap > .lpanel[hidden] { display: grid; visibility: hidden; }
.locks .status { min-height: 4.8em; }
.ft > .ft-tag { position: absolute; top: 12px; right: 14px; margin: 0; z-index: 2; }   /* v5h: the flagged tag sits in the corner, so it never moves the heading */
.lkx-p.lkx-cool[hidden] { display: none; }
/* v5h: nothing moves sideways either: fixed-width boxes for the lines whose text changes */
.locks .lpanel .status { width: min(100%, 46ch); }
.locks #coolBtn { width: min(100%, 300px); }
.locks .phrase-target { width: min(100%, 26ch); text-align: left; }

/* v5h: lock-type icons (ink style, the charm's line weight), the same in the lock tile chips and the lock section tabs */
.lk-ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lk-ic .f { fill: currentColor; stroke: none; }
.lkx-chip .lk-ic { width: 22px; height: 22px; }
.tab .k { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; font-size: 1rem; }
.tab .k .lk-ic { width: 28px; height: 28px; }
/* v5h: the hero trust line (links to the privacy tile) */
.hero .trust { margin: 6px 0 0; font-size: .8125rem; line-height: 1.4; }
.hero .trust a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; }
.hero .trust a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.trust-seal { width: 15px; height: 15px; flex: none; }
.trust-seal rect { fill: var(--shu); }
.trust-seal text { font: 400 10px/1 var(--f-brush); fill: #f6efe2; text-anchor: middle; }
@media (max-width: 600px) { .wp.w3 { display: none; } }   /* v5h: the shorter lede moved the status line into its path on phones */
.tab .k .lk-ic { width: 32px; height: 32px; }

/* ---------- v5i ---------- */
/* 1 header: the <nav> landmark takes the auto margin, so the links sit at the right with Get Mamori flush to the content edge */
.nav nav { margin-left: auto; }
.nav nav ul { margin-left: 0; }
/* 2 the hero trust line: after the price note, with room above, the seal centred with the text */
.hero .trust { order: 4; margin: 18px 0 0; font-size: .875rem; line-height: 1.4; }
.hero .trust a { gap: 8px; align-items: center; }
.trust-seal { width: 16px; height: 16px; }
@media (max-width: 600px) { .hero .trust { order: 0; margin: 12px 0 0; font-size: .8125rem; } }
/* 4 "Turn off protection" stays on one line */
.lkx-off { white-space: nowrap; padding: 0 22px; }
@media (max-width: 380px) { .lkx-off { padding: 0 16px; font-size: .875rem; } }

/* v5i: the phrase icon's "Aa" */
.lk-ic .lk-aa { font: 700 8.6px/1 var(--f-body); fill: currentColor; stroke: none; text-anchor: middle; letter-spacing: .02em; }
/* v5i: wide tiles: the art spans the tile, the heading and its line sit centred beside it (spacer rows above and below) */
@media (min-width: 720px) {
  .ft-acct { grid-template-rows: 1fr auto auto 1fr; row-gap: 0; }
  .ft-acct .pvx { grid-row: 1 / -1; grid-column: 1; }
  .ft-acct h3 { grid-row: 2; grid-column: 2; align-self: end; }
  .ft-acct p { grid-row: 3; grid-column: 2; align-self: start; }
}
@media (min-width: 1100px) {
  .ft-jp, .ft-acct { grid-template-rows: 1fr auto auto 1fr; row-gap: 0; }
  .ft-jp .nr-wrap { grid-row: 1 / -1; grid-column: 1; }
  .ft-jp h3 { grid-row: 2; grid-column: 2; align-self: end; }
  .ft-jp p { grid-row: 3; grid-column: 2; align-self: start; }
}
.ft-jp h3 + p, .ft-acct h3 + p { margin-top: 8px; }
/* v5i: the lock section. One centre axis; the phrase never wraps; extra characters hang off its right edge, so nothing moves */
.locks .lpanel { align-content: center; gap: 16px; }
.locks .phrase-target { position: relative; width: max-content; max-width: 100%; justify-self: center; text-align: center; white-space: nowrap; overflow-wrap: normal;
  font-size: clamp(.95rem, 4.1vw, 1.25rem); }
.locks .phrase-target span.xtra { position: absolute; left: 100%; top: 0; margin-left: 1px; }
.locks .field { text-align: center; }
.locks .status { min-height: 3.2em; }
@media (max-width: 600px) { .locks .status { min-height: 4.8em; } }

/* v5i (flagged): the growth list, each row starting with the object itself */
.gw-units { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 6px; justify-content: center; }
.gw-unit { display: grid; grid-template-columns: 34px auto; align-items: center; gap: 12px; min-height: 44px; padding: 4px 12px 4px 6px; border: 0; border-radius: 12px;
  background: none; color: var(--ink); font: 500 1.0625rem/1.3 var(--f-body); text-align: left; white-space: nowrap; cursor: pointer; transition: background-color .2s cubic-bezier(.23, 1, .32, 1); }
.gw-unit .gw-ic { display: grid; place-items: center; width: 34px; height: 34px; }
.gw-unit .gw-ic svg { width: 30px; height: 30px; }
.gw-unit.on, .gw-unit:focus-visible { background: rgba(232, 196, 130, .22); }
.gw-unit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .gw-unit:hover { background: rgba(232, 196, 130, .22); } }
.gw-looks { margin: 26px auto 0; max-width: 60ch; color: var(--ink-2); text-align: center; }

.gw-stage .gw-svg { pointer-events: none; }
@media (min-width: 720px) {
  .ft-jp { grid-template-rows: 1fr auto auto 1fr; row-gap: 0; }
  .ft-jp .nr-wrap { grid-row: 1 / -1; grid-column: 1; }
  .ft-jp h3 { grid-row: 2; grid-column: 2; align-self: end; }
  .ft-jp p { grid-row: 3; grid-column: 2; align-self: start; }
}

/* v5i (flagged section): "Your charm grows" is paper inside the night stretch, so it gets designed hand-overs, not hard edges:
   night -> dusk -> paper at the top, paper -> dusk -> night at the foot, in text-free bands (extra padding), dithered with the
   night grain so the long gradients never band. A faint warm horizon glows where night meets paper. */
.grow { --band: clamp(200px, 22vw, 300px); padding-top: calc(clamp(80px, 11vw, 160px) + var(--band)); padding-bottom: calc(clamp(80px, 11vw, 160px) + var(--band));
  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"),
    radial-gradient(120% 60px at 50% var(--band), rgba(255, 214, 150, .16), rgba(255, 214, 150, 0)),
    radial-gradient(120% 60px at 50% calc(100% - var(--band)), rgba(255, 214, 150, .16), rgba(255, 214, 150, 0)),
    linear-gradient(to bottom, var(--n1) 0, var(--dusk) calc(var(--band) * .45), color-mix(in srgb, var(--dusk) 30%, var(--paper)) calc(var(--band) * .78), var(--paper) var(--band),
      var(--paper) calc(100% - var(--band)), color-mix(in srgb, var(--dusk) 30%, var(--paper)) calc(100% - var(--band) * .78), var(--dusk) calc(100% - var(--band) * .45), var(--n1) 100%); }
@media (max-width: 600px) { .grow { --band: 180px; padding-top: calc(64px + var(--band)); padding-bottom: calc(64px + var(--band)); } }
/* v5i: the night sections that follow the lock section (or the growth section) start closer to their heading */
.locks + .night, .grow + .night { padding-top: clamp(56px, 7vw, 104px); }

/* v5i (flagged): the look swatches */
.gw-layer .gw-svg { position: absolute; inset: 0; }
.gw-try { display: grid; gap: 8px; margin-top: 6px; }
.gw-swg { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; }
.gw-swt { margin: 0; font: 600 .8125rem/1 var(--f-body); color: var(--ink-2); text-align: left; }
.gw-sws { display: flex; flex-wrap: wrap; gap: 2px; }
.gw-swb { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.gw-swb i { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px var(--l), 0 1px 2px rgba(60, 30, 12, .25); transition: transform .15s cubic-bezier(.23, 1, .32, 1); }
.gw-panel i { border-radius: 4px; width: 20px; height: 28px; }
.gw-swb[data-id="goldFrame"] i { box-shadow: inset 0 0 0 3px #b48a46; }
.gw-swb[aria-pressed="true"] i { transform: scale(1.12); box-shadow: inset 0 0 0 2px var(--l), 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.gw-swb:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .gw-swb:hover i { transform: scale(1.08); } }
.gw-swnote { margin: 2px 0 0; min-height: 1.5em; font-size: .875rem; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .gw-swb i { transition: none; } }
.final .fin-charm { scroll-margin-top: 16px; }   /* v5i: #pricing lands on the charm above "Tie it on tonight" */
@media (min-width: 720px) { .ft-jp .nr-wrap .try-say { min-height: 1.6em; } }   /* v5i: one line is enough beside the text; no empty band under the curtain */

/* v5i: the wait as a slim notched scale (the app's stops) */
.seg.scale { display: grid; gap: 2px; width: min(100%, 420px); padding: 4px 0 0; border: 0; background: none; }
.scale-in { -webkit-appearance: none; appearance: none; width: calc(100% - 100% / 7); justify-self: center; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.scale-in::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: repeating-linear-gradient(to right, var(--ink-3) 0 2px, transparent 2px calc(100% / 6 - 0.34px)), var(--line-strong);
  background-size: 100% 10px, 100% 2px; background-position: 0 50%, 0 50%; background-repeat: no-repeat; }
.scale-in::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--paper); }
.scale-in::-moz-range-track { height: 2px; background: var(--line-strong); }
.scale-in::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--paper); }
.scale-in:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.scale-stops { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.seg.scale .scale-stops button { all: unset; cursor: pointer; display: grid; place-items: center; min-height: 40px; border-radius: 8px; font: 500 .8125rem/1 var(--f-body); color: var(--ink-3); text-align: center; }
.seg.scale .scale-stops button[aria-pressed="true"] { background: none; color: var(--ink); font-weight: 700; }
.seg.scale .scale-stops button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ---------- v5j: the ensō is the wait picker; the stop names sit around the ring ---------- */
.seg.scale, .scale-in, .scale-stops { display: none; }
.dial { --es: 220px; --R: calc(var(--es) / 2 + 26px); position: relative; display: grid; place-items: center; width: calc(var(--es) + 84px); height: calc(var(--es) + 84px);
  border-radius: 50%; cursor: grab; -webkit-tap-highlight-color: transparent; }
.dial:active { cursor: grabbing; }
.dial[aria-disabled="true"] { cursor: default; }
.dial:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
.dial .enso { width: var(--es); height: var(--es); }
.enso .enso-name { position: absolute; left: 0; right: 0; top: 66%; text-align: center; font: 500 .8125rem/1 var(--f-body); color: var(--ink-3); }
.seg.dial-stops { position: absolute; inset: 0; display: block; padding: 0; border: 0; background: none; pointer-events: none; }
.seg.dial-stops button { all: unset; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 36px; height: 30px; border-radius: 8px; pointer-events: auto; cursor: pointer;
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--R)) rotate(calc(-1 * var(--a))); font: 500 .8125rem/1 var(--f-body); color: var(--ink-3); }
.seg.dial-stops button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); font-weight: 700; }
.dial[aria-disabled="true"] .dial-stops button { opacity: .5; pointer-events: none; }
@media (max-width: 420px) { .dial { --es: 184px; --R: calc(var(--es) / 2 + 22px); width: calc(var(--es) + 72px); height: calc(var(--es) + 72px); } }
/* ---------- v5j (flagged): swatches scroll sideways in one row, the next one peeking ---------- */
.gw-sws { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: calc(46px * 5.5); overscroll-behavior-x: contain; }
.gw-sws::-webkit-scrollbar { display: none; }
.gw-sws.fade-r { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.gw-sws .gw-swb { flex: none; scroll-snap-align: start; }

/* ---------- v5j (flagged): the swatches as in the app's Your charm: a heading over each row, names under the colours ---------- */
.gw-try { gap: 14px; }
.gw-swg { display: block; min-width: 0; }
.gw-swt { margin: 0 0 6px; font: 600 1.0625rem/1.2 var(--f-display); color: var(--ink); }
.gw-sws { gap: 4px; max-width: calc(64px * 4.5 + 16px); padding: 2px 0 4px; }
.gw-swb { width: 64px; height: auto; min-height: 44px; grid-template-rows: 44px auto; align-content: start; border-radius: 10px; }
.gw-swb i { width: 30px; height: 30px; }
.gw-swn { display: block; max-width: 62px; font: 400 .75rem/1.2 var(--f-body); color: var(--ink-2); text-align: center; }
.gw-swb[aria-pressed="true"] .gw-swn { color: var(--ink); font-weight: 600; }
.gw-hi { pointer-events: none; }

.dial .enso { grid-area: 1 / 1; }
.dial-grip, .dial-hole { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.dial-grip { z-index: 1; width: calc(var(--es) + 20px); height: calc(var(--es) + 20px); touch-action: none; }
.dial-hole { z-index: 2; width: calc(var(--es) * .56); height: calc(var(--es) * .56); }
.seg.dial-stops { z-index: 3; }
.dial[aria-disabled="true"] .dial-grip { touch-action: auto; }
.dial { -webkit-user-select: none; user-select: none; }
.dial:focus-visible { outline: none; }
.dial:focus-visible .dial-grip { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.gw-swt { margin-bottom: 0; }
.gw-sws, .gw-sws.fade-r { --fl: #000; --fr: #000; -webkit-mask-image: linear-gradient(to right, var(--fl), #000 12%, #000 86%, var(--fr)); mask-image: linear-gradient(to right, var(--fl), #000 12%, #000 86%, var(--fr)); }
.gw-sws.fade-r { --fr: transparent; }
.gw-sws.fade-l { --fl: transparent; }
@media (min-width: 900px) { .gw-sws { max-width: min(100%, calc(64px * 6.5 + 24px)); } }
.hero .cta + .trust { margin-top: 22px; }
@media (max-width: 600px) { .hero .cta + .trust { margin-top: 16px; } }
/* v5k: every wisp is whole. The art's dense root fades out (mask, in the element's own space, so it flips with the
   mirrored ones), and each wisp and smoke layer sits fully on screen in the margins beside the charm and the text. */
.wp b, .sm { -webkit-mask-image: linear-gradient(to right, transparent, #000 40%); mask-image: linear-gradient(to right, transparent, #000 40%); }
.w1 { --ww: min(34vw, 520px); } .w2 { --ww: min(30vw, 460px); } .w3 { --ww: min(26vw, 380px); } .w4 { --ww: min(27vw, 400px); }
.sm-far.l { left: 0; } .sm-far.r { right: 0; } .sm-near { right: 0; bottom: 0; width: min(30vw, 400px); }
@media (max-width: 899px) { .w1 { --ww: 26vw; } .w2 { --ww: 24vw; } .w3 { --ww: 23vw; } }
@media (max-width: 600px) { .sm-far.l { left: 0; width: 24vw; } .sm-far.r { right: 0; width: 22vw; } }
/* ---------- v5k: the milestone strip, Day > Week > Month > Year; the year (crane) step is the big one ---------- */
.gw-strip { list-style: none; margin: 26px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr); gap: 12px; width: min(100%, 760px); justify-content: stretch; align-items: stretch; }
.gw-strip .gw-step { display: flex; }
.gw-strip .gw-unit { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 132px;
  padding: 14px 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-3); text-align: center; white-space: normal; }
.gw-strip .gw-ic { width: 44px; height: 44px; margin-bottom: 4px; }
.gw-strip .gw-ic svg { width: 40px; height: 40px; }
.gw-strip .gw-un { font: 800 1.0625rem/1.2 var(--f-display); color: var(--ink); }
.gw-strip .gw-ul { font: 400 .875rem/1.35 var(--f-body); color: var(--ink-2); text-wrap: balance; }
.gw-strip .gw-step-year .gw-unit { border-color: rgba(201, 155, 78, .7);
  background: radial-gradient(120% 90% at 50% 30%, rgba(255, 226, 160, .55), rgba(255, 226, 160, 0) 70%), var(--paper-3);
  box-shadow: 0 0 0 1px rgba(232, 196, 130, .45), 0 10px 30px -12px rgba(214, 150, 60, .55), 0 0 26px -6px rgba(246, 206, 120, .6); }
.gw-strip .gw-step-year .gw-ic { width: 64px; height: 56px; }
.gw-strip .gw-step-year .gw-ic svg { width: 64px; height: 52px; filter: drop-shadow(0 0 6px rgba(240, 196, 100, .75)); }
.gw-strip .gw-step-year .gw-un { font-size: 1.25rem; }
.gw-strip .gw-step:not(:last-child) .gw-unit::after { content: ""; position: absolute; right: -10px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-top: 1.5px solid var(--ink-3); border-right: 1.5px solid var(--ink-3); transform: rotate(45deg); }
.gw-strip .gw-unit.on, .gw-strip .gw-unit:focus-visible { background-color: var(--paper-3); border-color: var(--shu-deep); }
.gw-strip .gw-step-year .gw-unit.on { border-color: #b8893a; }
@media (hover: hover) and (pointer: fine) { .gw-strip .gw-unit:hover { border-color: var(--shu-deep); } }
@media (max-width: 719px) {
  .gw-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .gw-strip .gw-step-year { grid-column: 1 / -1; }
  .gw-strip .gw-unit { min-height: 124px; padding: 12px 6px 10px; }
  .gw-strip .gw-step-year .gw-unit { min-height: 0; flex-direction: row; justify-content: center; gap: 14px; padding: 14px 16px; text-align: left; }
  .gw-strip .gw-step-year .gw-unit > .gw-un, .gw-strip .gw-step-year .gw-unit > .gw-ul { align-self: center; }
  .gw-strip .gw-step-year .gw-ic { margin: 0; flex: none; }
  .gw-strip .gw-ul { font-size: .8125rem; }
  .gw-strip .gw-step:nth-child(3) .gw-unit::after, .gw-strip .gw-step:not(:last-child) .gw-unit::after { display: none; }
}
@media (max-width: 719px) { .gw-strip .gw-step-year .gw-unit { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; justify-content: center; align-items: center; }
  .gw-strip .gw-step-year .gw-ic { grid-row: 1 / 3; } .gw-strip .gw-step-year .gw-un, .gw-strip .gw-step-year .gw-ul { text-align: left; } }
.gw-hl { pointer-events: none; }
/* ---------- v5k5: strip icon boxes share one height so the names line up; phones: a clean 2x2 grid of equal tiles ---------- */
.gw-strip .gw-ic { height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.gw-strip .gw-step-year .gw-ic { width: 72px; height: 64px; }
.gw-strip .gw-step-year .gw-ic svg { width: 44px; height: 66px; filter: drop-shadow(0 0 5px rgba(240, 196, 100, .85)) drop-shadow(0 0 12px rgba(246, 206, 120, .55)); }
.gw-strip .gw-step-year .gw-un { color: #6e4f1c; }
@media (max-width: 719px) {
  .gw-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gw-strip .gw-step-year { grid-column: auto; }
  .gw-strip .gw-unit, .gw-strip .gw-step-year .gw-unit { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 148px; padding: 12px 8px 12px; text-align: center; }
  .gw-strip .gw-step-year .gw-ic { grid-row: auto; margin: 0 0 2px; }
  .gw-strip .gw-step-year .gw-un, .gw-strip .gw-step-year .gw-ul { text-align: center; align-self: auto; }
  .gw-strip .gw-ic { height: 56px; }
  .gw-strip .gw-step-year .gw-ic { height: 56px; }
  .gw-strip .gw-step-year .gw-ic svg { width: 38px; height: 58px; }
  .gw-strip .gw-ul { font-size: .875rem; }
}
.wp { left: 6px; } .wp.r { left: auto; right: 6px; }
/* ---------- v5k6: the hanging loop is 44 units longer on every charm (the app's cordLonger). Hero: the loop is drawn up into a
   padding band above the svg (overflow visible), so the svg and everything sized to it stay as they were; what is placed by the
   button's height is re-aimed at the pouch. Growth: viewBox 0 -44 320 704. ---------- */
.charm-hang { padding-top: 13.7500%; }
.charm-idle { transform-origin: 50% -13.7500cqw; }
.charm-glow { top: 61.06%; }
.charm-aura, .charm-bloom { top: 63.84%; }
.charm-floor { bottom: -2.78%; height: 5.56%; }
.hero::before { top: calc(clamp(20px, 3.5svh, 44px) + var(--cw) * 0.6375); }
@media (max-width: 600px) { .hero::before { top: calc(12px + var(--cw) * 0.5875); } }
.gw-stage { aspect-ratio: 320 / 704; }
.gw-glow { top: 53.12%; }
/* ---------- v5l: swatch rows never move. Every swatch is the same height with one fixed label line (one-word names); the selected one is a
   ring, a scale (transform) and an underline, never bold (no rewrap); the faded edge items keep their size. ---------- */
.gw-sws { align-items: flex-start; }
.gw-swb { height: calc(44px + 1.05rem); min-height: 0; grid-template-rows: 44px 1.05rem; }
.gw-swn { height: 1.05rem; max-width: 62px; overflow: hidden; white-space: nowrap; line-height: 1.05rem; }
.gw-swb[aria-pressed="true"] .gw-swn { font-weight: 400; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.gw-swnote { min-height: 3em; }
.gw-panel[data-id="hinoki"] i { background: repeating-linear-gradient(97deg, #ead3a6 0 3px, #d7b37e 3px 4px, #ead3a6 4px 7px); }
.gw-panel[data-id="sakuraWashi"] i { background: radial-gradient(circle at 30% 30%, #e6a3b3 0 2px, transparent 2.5px), radial-gradient(circle at 70% 65%, #e6a3b3 0 1.6px, transparent 2px), #f8e6e8; }
.gw-panel[data-id="redSeal"] i { background: linear-gradient(#c3371f, #c3371f) center / 12px 12px no-repeat, #fbf6ec; }
.gw-panel[data-id="indigo"] i { box-shadow: inset 0 0 0 2px #b48a46, 0 1px 2px rgba(60, 30, 12, .25); }
.gw-panel[data-id="nightInk"] i { box-shadow: inset 0 0 0 2px #d9b46a, 0 1px 2px rgba(60, 30, 12, .25); }
.gw-swb.gw-panel[aria-pressed="true"][data-id="indigo"] i, .gw-swb.gw-panel[aria-pressed="true"][data-id="nightInk"] i { box-shadow: inset 0 0 0 2px #d9b46a, 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.gw-pattern i { box-shadow: inset 0 0 0 2px #8f2412, 0 1px 2px rgba(60, 30, 12, .25); }
/* ---------- v5l: phones and tablets: the charm stays pinned under the header while the rows scroll beneath it ---------- */
@media (max-width: 899px) {
  .grow .gw { display: block; }
  .grow .gw-stage { position: sticky; top: calc(var(--hdr, 65px) + 6px); z-index: 3; width: auto; height: clamp(220px, 40svh, 440px); aspect-ratio: 320 / 704; margin: 0 auto; }
  .grow .gw-stage::before { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; margin-left: -50vw; top: -7px; bottom: 0; background: var(--paper); pointer-events: none; }
  .grow .gw-stage::after { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; margin-left: -50vw; top: 100%; height: 24px; background: linear-gradient(var(--paper), rgba(242, 234, 219, 0)); pointer-events: none; }
  .grow .gw-ctl { margin: 14px auto 0; }
}
@media (min-width: 900px) { .grow .gw { align-items: start; } .grow .gw-stage { position: sticky; top: calc(var(--hdr, 73px) + 24px); } }
/* ---------- v5l2: names of up to two words: 2 label lines reserved on every swatch, so a row never changes height ---------- */
.gw-swb { height: calc(44px + 1.8rem); grid-template-rows: 44px 1.8rem; }
.gw-swn { height: 1.8rem; max-width: 62px; white-space: normal; line-height: .9rem; overflow: hidden; }
.gw-panel[data-id="hinoki"] i { background: repeating-linear-gradient(92deg, #ead4ac 0 3px, #cfa676 3px 4px, #ead4ac 4px 7px); }
.gw-panel[data-id="sakuraWashi"] i { background: radial-gradient(circle at 30% 30%, #e8a3b3 0 2px, transparent 2.5px), radial-gradient(circle at 70% 65%, #e8a3b3 0 1.6px, transparent 2px), #f8e4e3; }
.gw-panel[data-id="shuin"] i { background: linear-gradient(#d2452f, #d2452f) center / 11px 17px no-repeat, #fbf6ec; }
.gw-panel[data-id="aizome"] i, .gw-panel[data-id="nightInk"] i { box-shadow: inset 0 0 0 2px #f3e6c8, 0 1px 2px rgba(60, 30, 12, .25); }
.gw-swb.gw-panel[aria-pressed="true"][data-id="aizome"] i, .gw-swb.gw-panel[aria-pressed="true"][data-id="nightInk"] i { box-shadow: inset 0 0 0 2px #f3e6c8, 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.gw-panel[data-id="inkBrush"] i { box-shadow: inset 0 0 0 2px #3a332d, 0 1px 2px rgba(60, 30, 12, .25); }
/* ---------- v5l3: smaller sub-rows (Tassel under Cord, Crest under Panel), fixed height; the seal switch; the strip's extra line ---------- */
.gw-sub { margin-top: -6px; }
.gw-sub .gw-swt { margin: 0 0 2px; font: 600 .8125rem/1.2 var(--f-body); color: var(--ink-2); }
.gw-sub .gw-swb { width: 54px; height: calc(34px + 1.5rem); grid-template-rows: 34px 1.5rem; }
.gw-sub .gw-swb i { width: 22px; height: 22px; }
.gw-sub .gw-swn { height: 1.5rem; max-width: 52px; font-size: .6875rem; line-height: .75rem; }
.gw-k-crest i { border-radius: 50%; }
.gw-sealrow { display: flex; justify-content: flex-start; margin-top: -4px; }
.gw-sealsw { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink-2); font: 500 .875rem/1 var(--f-body); cursor: pointer; }
.gw-sealsw .gw-knob { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--line-strong); transition: background-color .2s; }
.gw-sealsw .gw-knob::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fffaf1; box-shadow: 0 1px 2px rgba(60, 30, 12, .3); transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.gw-sealsw[aria-checked="true"] .gw-knob { background: var(--shu-deep); }
.gw-sealsw[aria-checked="true"] .gw-knob::after { transform: translateX(16px); }
.gw-sealsw:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.gw-plus { margin: 12px auto 0; max-width: 60ch; text-align: center; color: var(--ink-2); font-size: .9375rem; }
@media (prefers-reduced-motion: reduce) { .gw-sealsw .gw-knob, .gw-sealsw .gw-knob::after { transition: none; } }
/* ---------- v5l4: the rows are drawn by grow.js; each strip reserves one swatch's height, so filling in moves nothing ---------- */
.gw-sws { min-height: calc(44px + 1.8rem + 6px); box-sizing: border-box; }
/* ---------- v5l12: with APP_LIVE on, every swatch reserves room for the "Animated · Full protection" tag, so rows stay one height ---------- */
.gw-try[data-fp="1"] .gw-swb { height: calc(44px + 1.8rem + 1.3rem); grid-template-rows: 44px 1.8rem 1.3rem; }
.gw-try[data-fp="1"] .gw-sws { min-height: calc(44px + 1.8rem + 1.3rem + 6px); }
.gw-swtag { display: block; height: 1.3rem; max-width: 62px; overflow: hidden; font: 600 .5625rem/.65rem var(--f-body); color: var(--shu-deep); text-align: center; }
/* ---------- v5x (owner 12 Nov): every row is ONE line at every width. Touch: native swipe with the next swatch peeking. Mouse: arrows at the
   row ends, click-and-drag, a thin visible scrollbar. The wrapper .gw-rw carries the row's width so the arrows sit on the row's ends. ---------- */
.gw-rw { position: relative; max-width: calc(64px * 4.5 + 16px); }
@media (min-width: 900px) { .gw-rw { max-width: min(100%, calc(64px * 6.5 + 24px)); } }
.gw-rw .gw-sws, .gw-rw .gw-sws.fade-r, .gw-rw .gw-sws.fade-l { max-width: none; }
.gw-sws.drag { cursor: grabbing; scroll-snap-type: none; -webkit-user-select: none; user-select: none; }
.gw-sws.drag * { pointer-events: none; }
.gw-arr { display: none; }
@media (hover: hover) and (pointer: fine) {
  .gw-sws { cursor: grab; scrollbar-width: thin; scrollbar-color: var(--ink-2) transparent; padding-bottom: 14px; min-height: calc(44px + 1.8rem + 6px + 10px); }
  .gw-try[data-fp="1"] .gw-sws { min-height: calc(44px + 1.8rem + 1.3rem + 6px + 10px); }
  .gw-sws::-webkit-scrollbar { display: block; height: 6px; }
  .gw-sws::-webkit-scrollbar-thumb { background: var(--ink-2); border-radius: 3px; }
  .gw-sws::-webkit-scrollbar-track { background: rgba(0, 0, 0, .06); border-radius: 3px; }
  .gw-arr { display: grid; place-items: center; position: absolute; top: 14px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; z-index: 2;
    background: var(--paper, #fbf6ec); color: var(--ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .18); cursor: pointer; opacity: 1; transition: opacity .15s; }
  .gw-arr.l { left: 2px; } .gw-arr.r { right: 2px; }
  .gw-arr[hidden] { display: grid; opacity: 0; visibility: hidden; pointer-events: none; }
  .gw-arr:hover { background: #fff; }
  .gw-arr:focus-visible { outline: 2px solid var(--focus, #1a56db); outline-offset: 2px; }
  .gw-arr svg { width: 14px; height: 14px; display: block; }
}
@media (prefers-reduced-motion: reduce) { .gw-arr { transition: none; } }

/* ---------- v5z (12 Nov) ---------- */
/* "Your charm grows": hours. Under the charm, the app's own charm at five hour stops; each says only its hours. */
.grow .gw-cap { margin: 0; text-align: left; }   /* styled as the look rows' titles (it also has .gw-swt) */
.gw-hours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; width: 100%; max-width: calc(64px * 4.5 + 16px); }   /* the look rows' width and left edge */
@media (min-width: 900px) { .gw-hours { max-width: min(100%, calc(64px * 6.5 + 24px)); } }
.gw-hours .gw-tick { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 8px 0 8px; border: 1px solid transparent; border-radius: 12px;
  background: transparent; color: var(--ink-2); font: 600 .75rem/1.15 var(--f-body); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.gw-hours .gw-tick img { display: block; width: min(100%, 50px); height: auto; pointer-events: none; }
.gw-hours .gw-tick[aria-pressed="true"] { background: var(--paper-3); border-color: rgba(156, 40, 20, .55); color: var(--ink); box-shadow: 0 6px 16px -12px rgba(70, 40, 20, .6); }
@media (hover: hover) and (pointer: fine) { .gw-hours .gw-tick:hover { border-color: var(--line-strong); } .gw-hours .gw-tick[aria-pressed="true"]:hover { border-color: rgba(156, 40, 20, .55); } }
.gw-hours .gw-tick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (min-width: 900px) { .gw-hours { gap: 6px; } .gw-hours .gw-tick { font-size: .8125rem; padding: 10px 0; } .gw-hours .gw-tick img { width: min(100%, 60px); } .grow .gw-ctl { gap: 12px; } }
@media (max-width: 899.98px) { .gw-hours { gap: 0; } .gw-hours .gw-tick { font-size: .6875rem; letter-spacing: -.02em; } }
@media (prefers-reduced-motion: reduce) { .gw-hours .gw-tick { transition: none; } }

/* the features section now hands straight over to the growth section (the dial section is gone): it ends in the night colour */
/* "Everything in one charm" (1.0.7 side): six cards. The lock card first and big (its own column on computers), then five short cards. */
.feats { 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) calc(100% - clamp(24px, 3vw, 48px)), var(--n1) 100%); }
.f7-grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.f7 { position: relative; min-width: 0; background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px 20px 20px; box-shadow: 0 18px 40px -32px rgba(70, 40, 20, .45); }
.f7-hd { display: flex; align-items: center; gap: 10px; }
.f7-ic { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.f7-ic .a { fill: var(--shu); stroke: none; } .f7-ic .s { stroke: var(--shu); }
.f7 h3, .f7-h3 { margin: 0; font: 800 1.125rem/1.25 var(--f-display); color: var(--ink); }
.f7 p, .f7-p { display: block; margin: 8px 0 0; color: var(--ink-2); font: 400 .9375rem/1.5 var(--f-body); text-wrap: pretty; }
.f7-adult { padding: 0; }
.f7-open { display: block; width: 100%; padding: 18px 20px 20px; border: 0; border-radius: inherit; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.f7-go { flex: none; width: 16px; height: 16px; margin-left: auto; fill: none; stroke: var(--shu-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .f7-open:hover .f7-go { transform: translateX(3px); } .f7-adult:hover { border-color: var(--line-strong); } }
.f7-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (min-width: 720px) {
  .f7-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
  .f7-lock { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: 32px; align-items: center; }
  .f7-lock > .f7-hd, .f7-lock > p { grid-column: 1; } .f7-lock > .f7-hd { align-self: end; } .f7-lock > p { align-self: start; }
  .f7-lock > .lk7 { grid-column: 2; grid-row: 1 / span 2; }
  .f7-grows { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .f7-grid { grid-template-columns: minmax(0, 1.08fr) repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; }
  .f7-lock { grid-column: 1; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: stretch; padding: 22px 24px 18px; }
  .f7:not(.f7-lock) { display: flex; flex-direction: column; justify-content: center; }   /* the short cards share the lock card's height: their words sit in the middle */
  .f7-adult .f7-open { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .f7-lock > .f7-hd, .f7-lock > p { align-self: auto; }
  .f7-lock > .lk7 { margin-top: auto; padding-top: 14px; }
  .f7-lock .lk7-dial { width: min(100%, 236px); }
  .f7-grows { grid-column: 2 / -1; }
  .f7 h3, .f7-h3 { font-size: 1.1875rem; }
}

/* the lock picker (both sides): the app's four-part switch (the chosen part a raised paper pill) and one fixed panel */
.lk7 { margin-top: 14px; width: 100%; }
.lk7-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 4px; border-radius: 16px; background: var(--paper-2); }
.lk7-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0 4px; border: 0; border-radius: 12px; background: transparent;
  color: var(--ink-2); font: 500 .9375rem/1 var(--f-body); white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.lk7-seg svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lk7-seg svg .f { fill: currentColor; stroke: none; } .lk7-seg svg .w { stroke-width: 2.6; }
.lk7-seg button[aria-pressed="true"] { background: var(--paper-3); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(60, 30, 12, .14), 0 6px 14px -8px rgba(60, 30, 12, .38); }
@media (hover: hover) and (pointer: fine) { .lk7-seg button[aria-pressed="false"]:hover { color: var(--ink); } }
.lk7-seg button:focus-visible, .lk7-dial:focus-visible, .lk7-sl:focus-visible, .lk7-offer:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lk7-panel { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 10px; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fffaf1; }
.lk7-p { grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.lk7-p[hidden] { display: flex; visibility: hidden; }   /* every panel keeps its place in the one cell, so the panel is as tall as the tallest and never jumps */
.lk7 .lk7-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; font: 800 1.25rem/1.2 var(--f-display); color: var(--ink); white-space: nowrap; }
.lk7-n { font: 400 .8125rem/1 var(--f-body); color: var(--ink-3); }
.lk7-n b { margin-right: 4px; font: 800 1.5rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.lk7.plocked .lk7-n b { color: var(--ink-3); }
.lk7-body { flex: 1; display: flex; padding-top: 6px; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.lk7-open { width: 54px; height: 54px; fill: none; stroke: var(--ink-2); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lk7 .lk7-line { margin: 14px 0 0; font: 400 .9375rem/1.4 var(--f-body); color: var(--ink-2); text-align: center; }
.lk7-seals { display: flex; gap: 10px; }
.lk7-seals i { position: relative; width: 34px; height: 34px; border: 1.5px solid var(--ink-3); border-radius: 8px; }
.lk7-seals i::after { content: "守"; position: absolute; inset: 3px; display: grid; place-items: center; border-radius: 5px; background: var(--shu); color: #fbf6ec; font: 400 15px/1 var(--f-brush); opacity: 0; transform: scale(1.35); transition: opacity .18s ease-out, transform .32s cubic-bezier(.3, .7, .3, 1.25); }
.lk7-seals i.on { border-color: rgba(156, 40, 20, .55); } .lk7-seals i.on::after { opacity: 1; transform: none; }
.lk7-dial { width: min(100%, 262px); touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; border-radius: 12px; }
.lk7-dial.drag { cursor: grabbing; }
.lk7-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lk7-track { fill: none; stroke: var(--line-strong); stroke-width: 1.6; }
.lk7-ink { fill: var(--ink); fill-rule: evenodd; }
.lk7-read { font: 700 34px/1 var(--f-display); fill: var(--ink); text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.lk7.locked .lk7-read { fill: var(--ink-3); }
.lk7-dot { fill: var(--ink); } .lk7-dot.lock { fill: var(--ink-3); }
.lk7-lab { font: 400 12.5px/1 var(--f-body); fill: var(--ink-2); dominant-baseline: central; }
.lk7-lab.lock { fill: var(--ink-3); } .lk7-lab.on { font-weight: 700; fill: var(--ink); }
.lk7-lk { fill: var(--shu-deep); fill-rule: evenodd; }
.lk7-box { align-self: stretch; height: 114px; margin-top: 4px; padding: 10px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2);
  font: 500 .9375rem/1.55 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; color: var(--ink-2); word-break: break-all; }
.lk7-box.long { -webkit-mask-image: linear-gradient(#000 70%, rgba(0, 0, 0, .25)); mask-image: linear-gradient(#000 70%, rgba(0, 0, 0, .25)); }
.lk7-sl { position: relative; align-self: stretch; height: 44px; margin-top: 14px; touch-action: none; cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.lk7-slsvg { position: absolute; left: 0; top: 8px; width: 100%; height: 28px; overflow: visible; }
.lk7-sltrack { fill: none; stroke: var(--line-strong); stroke-width: 1.6; stroke-linecap: round; }
.lk7-slink { fill: var(--ink); }
.lk7-thumb { position: absolute; top: 12px; left: 12px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--paper-3); border: 2.4px solid var(--ink); box-sizing: border-box; pointer-events: none; }
.lk7-ends { align-self: stretch; display: flex; justify-content: space-between; padding: 0 4px; font: 400 .75rem/1 var(--f-body); color: var(--ink-3); }
.lk7-slot { position: relative; height: 26px; margin: 4px 0 0; display: grid; place-items: center; }
.lk7-hint, .lk7-offer { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; font: 700 .8125rem/1 var(--f-body); color: var(--shu-deep); }
.lk7-hint[hidden], .lk7-offer[hidden] { display: none; }
.lk7-hint svg { width: 12px; height: 12px; fill: var(--shu-deep); stroke: var(--shu-deep); stroke-width: 1.4; }
.lk7-offer { min-height: 26px; padding: 0 10px; text-decoration: none; border-radius: 13px; animation: lk7-in .2s var(--ease); }
.lk7-offer:hover { text-decoration: underline; text-underline-offset: 3px; }
@keyframes lk7-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 380px) { .lk7-seg button { gap: 4px; font-size: .875rem; } .lk7-seg svg { width: 14px; height: 14px; } .lk7-panel { padding: 14px 14px 10px; } .lk7 .lk7-t { font-size: 1.125rem; } .lk7-n b { font-size: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .lk7-seg button, .f7-go, .lk7-seals i::after { transition: none; } .lk7-offer { animation: none; } }
/* the live side: the lock card holds the picker (its old demo and the dial section are gone) */
.ft-lock .lk7 { margin-top: 4px; }
.ft-lock h3 { margin-top: 16px; }

/* the Japanese sites curtain, opened from "Adult sites, done right": a light paper card over a soft dim */
.f7-dlg { width: min(100vw - 32px, 520px); max-width: none; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.f7-dlg::backdrop { background: rgba(28, 23, 20, .32); }
.f7-dlg .f7-jp { display: block; margin: 0; padding: 22px 20px 20px; box-shadow: 0 24px 60px -24px rgba(40, 20, 8, .55); }
.f7-dlg .f7-jp h3 { margin: 0 44px 10px 0; font: 800 1.1875rem/1.25 var(--f-display); }
.f7-dlg .nr-wrap { margin-top: 4px; }
.f7-dlg .ft .try-say, .f7-dlg .nr-wrap .try-say { position: static; min-height: 1.4em; margin: 8px 0 0; }
.f7-dlg .ft-art.nr { display: block; width: 100%; height: auto; max-height: none; }
.f7-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 22px; background: transparent; color: var(--ink-2); cursor: pointer; }
.f7-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.f7-x:hover { background: rgba(28, 23, 20, .06); }
.f7-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* owner 12 Nov: no dark band between the features and the growth (it was the hand-over to the dial section, which is gone). The two sections
   join on paper like the others; the growth section keeps only its dusk hand-over at the bottom, into the night FAQ. */
.feats { background: none; padding-bottom: var(--sec-pad); }
.feats > .band-night { display: none; }
.grow { padding-top: var(--sec-pad);
  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"),
    radial-gradient(120% 60px at 50% calc(100% - var(--band)), rgba(255, 214, 150, .16), rgba(255, 214, 150, 0)),
    linear-gradient(to bottom, var(--paper) 0, var(--paper) calc(100% - var(--band)), color-mix(in srgb, var(--dusk) 30%, var(--paper)) calc(100% - var(--band) * .78), var(--dusk) calc(100% - var(--band) * .45), var(--n1) 100%); }
@media (max-width: 600px) { .grow { padding-top: 64px; } }
.f7 p a { color: var(--shu-deep); font-weight: 500; white-space: nowrap; text-underline-offset: 3px; }

/* owner 12 Nov: "Your charm grows the longer it protects you." never wraps awkwardly. Computers: one line. Below 1024 px: the heading
   "Your charm grows" and, under it, the line "the longer it protects you." */
@media (min-width: 1024px) { .grow #growH { white-space: nowrap; font-size: clamp(2rem, 3.4vw, 3rem); } }
@media (max-width: 1023.98px) { .grow .gw-h2x { display: block; margin-top: 12px; font: 400 1.125rem/1.5 var(--f-body); color: var(--ink-2); letter-spacing: 0; } }
/* nav "Locks" lands on the lock card (both sides), just under the header */
#locks { scroll-margin-top: 16px; }

/* ---------- v5z (owner 12 Nov): one hover for every card, panel and tile. Mouse only, transform + shadow + border tint only (nothing
   reflows), a quick ease-out lift (200 ms) and a slightly slower settle (260 ms); chips and swatches lift less; none with reduced motion. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .feats .ft, .f7, .bn-panel, .tier, .gw-hours .gw-tick {
    transition: transform .26s cubic-bezier(.4, 0, .2, 1), box-shadow .26s cubic-bezier(.4, 0, .2, 1), border-color .26s cubic-bezier(.4, 0, .2, 1); }
  .feats .ft:hover, .f7:hover, .bn-panel:hover, .tier:hover, .gw-hours .gw-tick:hover {
    transform: translateY(-3px); border-color: rgba(185, 140, 70, .42);
    box-shadow: 0 2px 6px -2px rgba(70, 40, 20, .12), 0 22px 44px -26px rgba(70, 40, 20, .5);
    transition-duration: .2s; transition-timing-function: cubic-bezier(.23, 1, .32, 1); }
  .gw-hours .gw-tick:hover { transform: translateY(-2px); }
  .bn-chip, .bn-tag, .gw-swb { transition: transform .22s cubic-bezier(.4, 0, .2, 1), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
  .bn-chip:hover, .bn-tag:hover, .gw-swb:hover { transform: translateY(-1.5px); transition-duration: .18s; }
  .bn-chip:active, .bn-tag:active, .gw-swb:active, .gw-hours .gw-tick:active { transform: translateY(0) scale(.985); transition-duration: .08s; }
}
/* v5z (owner 12 Nov): one highlight glides between Off / PIN / Type / Wait (user taps 240 ms; the ambient tour 560 ms ease-in-out) */
.lk7-seg { position: relative; }
.lk7-seg button { position: relative; z-index: 1; transition: color .24s cubic-bezier(.23, 1, .32, 1); }
.lk7-seg.has-ind button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.lk7-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 14px) / 4); border-radius: 12px; background: var(--paper-3);
  box-shadow: 0 1px 2px rgba(60, 30, 12, .14), 0 6px 14px -8px rgba(60, 30, 12, .38); transform: translateX(calc(var(--i, 3) * (100% + 2px))); transition: transform .24s cubic-bezier(.23, 1, .32, 1); pointer-events: none; }
.lk7-seg.auto .lk7-ind { transition-duration: .56s; transition-timing-function: cubic-bezier(.65, 0, .35, 1); }
.lk7-seg.auto button { transition-duration: .56s; }
.lk7-read.words { font-size: 25px; }   /* under a minute the wait reads in words: "15 seconds" */
@media (prefers-reduced-motion: reduce) { .lk7-ind, .lk7-seg button { transition: none; } }
/* v5z (owner 12 Nov: "the transition to the charm seems to be only 1 line"): the growth section's own paper began on a hard edge against the
   page's warmer textured paper. Its paper now fades in over the first 140 px, so the page's texture melts into it with no line and no band;
   the features' warm glow also fades out over its last 140 px instead of being cut at the section edge. */
.feats > .feat-sky { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 140px), transparent); }
.grow { 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"),
    radial-gradient(120% 60px at 50% calc(100% - var(--band)), rgba(255, 214, 150, .16), rgba(255, 214, 150, 0)),
    linear-gradient(to bottom, color-mix(in srgb, var(--paper) 0%, transparent) 0, var(--paper) 140px, var(--paper) calc(100% - var(--band)), color-mix(in srgb, var(--dusk) 30%, var(--paper)) calc(100% - var(--band) * .78), var(--dusk) calc(100% - var(--band) * .45), var(--n1) 100%); }
/* v5z (owner rule: nothing moves on a click): the block list's state mark (x or tick) sits in a fixed 1.2em slot, so flipping a row
   no longer changes the list's width by 2 px and nudges every row on computers */
.blx-st { flex: none; display: inline-block; width: 1.2em; text-align: center; }
/* v5z (owner 12 Nov: "headers must start at the same level"): the short feature cards start at the top like the lock card (their words no
   longer float in the middle), and site.js lines the titles of each row up (see alignRows); the chooser's people, heart and game-pad
   drawings sat a little low in their boxes, so they are lifted to the same optical centre as the other icons */
@media (min-width: 1024px) { .f7:not(.f7-lock) { justify-content: flex-start; } }
.bn-chip[data-cat="social"] svg { transform: translateY(-0.4px); }
.bn-chip[data-cat="dating"] svg { transform: translateY(-0.55px); }
.bn-chip[data-cat="games"] svg { transform: translateY(-0.6px); }
/* the feature card icons share one optical centre: the padlock sat 0.5 units low, the new-installs box 0.9 units high */
.f7-lock .f7-ic { transform: translateY(-0.54px); }
.f7-ic:has(> rect[y="7"]:first-child) { transform: translateY(0.98px); }
/* v5z launch check: phone tap targets at least 44 px tall without moving anything (padding taken back by negative margin) */
.hero .trust a { padding-block: 13px; margin-block: -13px; }
a.brand { padding-block: 4px; margin-block: -4px; }
.foot a.brand { padding-block: 4px; margin-block: -4px; }
.foot ul a { padding-inline: 7px; margin-inline: -7px; }
/* v5z (owner 12 Nov: "why do you wrap this unnecessarily?"): a heading stays on one line wherever it fits at a readable size
   (28 px+ on phones); it is only made a touch smaller when that is all it takes, never below the floor (then it wraps, balanced) */
#choose .bn-head { container-type: inline-size; }
#choose .bn-head h2 { max-width: none; --fs: clamp(2rem, 4.2vw, 3.5rem); font-size: max(1.75rem, min(var(--fs), 7.9cqi)); }
@media (min-width: 1024px) { #choose .bn-head h2 { --fs: clamp(2rem, 3.4vw, 3rem); } }
@media (max-width: 699px) {
  .feats > .wrap > h2 { font-size: max(1.75rem, min(2rem, calc((100vw - 40px) / 12.25))); }
  .final h2 { font-size: max(1.75rem, min(2.25rem, calc((100vw - 40px) / 10.2))); }
}
@media (min-width: 700px) { .hero h1 { font-size: clamp(2.5rem, min(5.4vw, 8.4svh), 4.6rem); } }   /* "A charm that keeps porn away." fits the 1112 px column on one line */
@media (min-width: 720px) and (max-width: 1023px) {   /* the two wide cards stack (picture above, words below) so their titles get the full width */
  .ft-grid > .ft-jp, .ft-grid > .ft-acct { display: flex; flex-direction: column; }
  .ft-jp h3, .ft-acct h3 { margin-top: 18px; }
  .ft-grid > .ft-jp > *, .ft-grid > .ft-acct > * { align-self: stretch; }
  .ft-grid > .ft-jp > :first-child, .ft-grid > .ft-acct > :first-child { align-self: center; }
}
/* v5z (owner 12 Nov: the lock section looked blank on computers; phones stay exactly as they were): from 1024 px the lock panel is compact and
   full (Off = the charm with its cord untied, PIN = the seals over a small paper keypad, Type = phrase box + slider, Wait = the ensō), still one
   fixed size for all four (one grid cell); on the 1.0.7 side the lock card and the column of feature cards sit side by side, the cards at their
   own height and the lock panel stretching to match, so no card carries blank space */
.lk7-keys { display: none; }
.lk7-open { display: none; }   /* v5z5 (owner): the Off panel shows the charm with its cord untied on phones too */
.lk7-charm { display: block; height: 176px; width: auto; overflow: visible; }   /* phones: sized to the fixed panel (the Wait dial sets its height) */
@media (max-width: 1023px) { .f7-lock .lk7-charm { height: 214px; } .ft-lock .lk7-charm { height: 190px; } }   /* fills the Off panel; the Wait dial still sets the height */
@media (min-width: 1024px) {
  .lk7-open { display: none; }
  .lk7-charm { display: block; height: 220px; width: auto; overflow: visible; }
  .lk7-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 9px; justify-content: center; margin-top: 18px; }
  .lk7-key { height: 40px; font-size: 1.0625rem; }
  .lk7-seals i { width: 38px; height: 38px; }
  .lk7-panel { margin-top: 8px; padding: 12px 16px 8px; }
  .lk7-body { padding-top: 4px; justify-content: space-evenly; }
  .lk7-box { height: 170px; padding: 10px 14px; }
  .lk7-sl { margin-top: 10px; }
  .lk7-slot { margin-top: 2px; }
  .lk7 .lk7-line { margin: 10px 0 0; }
  .f7-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }   /* the lock card | the other five cards as one column */
  .f7-lock { grid-column: 1; grid-row: 1 / span 5; }
  .f7-grid > .f7:not(.f7-lock), .f7-grid > .f7-grows { grid-column: 2; }
  .f7-lock > .lk7 { margin-top: 0; padding-top: 14px; flex: 1; display: flex; flex-direction: column; }
  .f7-lock .lk7-panel { flex: 1; }
  .f7-lock .lk7-dial { width: min(100%, 300px); }
  .ft-lock .lk7-dial { width: min(100%, 262px); }
}
.lk7-pouch { fill: #b8321d; stroke: #8f2412; stroke-width: 6; stroke-linejoin: round; }
.lk7-slip { fill: #fbf6ec; stroke: #d9b46a; stroke-width: 4; }
.lk7-kana { font: 400 62px/1 var(--f-brush); fill: var(--ink); text-anchor: middle; }
.lk7-cu { fill: none; stroke: var(--cord-shade, #9a7a3c); stroke-width: 15; stroke-linecap: round; }
.lk7-ct { fill: none; stroke: var(--cord, #d9b46a); stroke-width: 9; stroke-linecap: round; }
.lk7-knot { fill: var(--cord, #d9b46a); stroke: var(--cord-shade, #9a7a3c); stroke-width: 4; }
.lk7-key { height: 30px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fffaf1; color: var(--ink); font: 600 .9375rem/1 var(--f-body);
  font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .12s var(--ease), transform .12s var(--ease); -webkit-tap-highlight-color: transparent; }
.lk7-key.down, .lk7-key:active { background: var(--paper-2); transform: translateY(1px); }
.lk7-key:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lk7-key:hover { border-color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .lk7-key { transition: none; } }
/* 1.0.7 side, 1024 px+: the lock panel takes the height the column of cards gives it, and its contents scale to that height (container units),
   so no panel shows a blank band at any width */
@media (min-width: 1024px) {
  .f7-lock .lk7-panel { container-type: size; min-height: 300px; }
  .f7-lock .lk7-dial { width: min(100%, 340px, calc((100cqh - 80px) * 1.06)); }
  .f7-lock .lk7-charm { height: clamp(150px, calc(100cqh - 118px), 270px); }
  .f7-lock .lk7-key { height: clamp(34px, calc((100cqh - 176px) / 4.7), 50px); }
  .f7-lock .lk7-box { height: clamp(110px, calc(100cqh - 196px), 250px); }
}