/* zorkel.app
   Layout: codes as you meet them. Printed stickers with real, scannable codes sit on the page; Zorkel's scan frame
   locks onto them and its result card says what is inside, the way the app does. Headings come into focus like the
   camera: Geologica's sharpness axis goes from soft to sharp. Navy ink and the mint of the app icon on a pale mint
   ground; stickers stay white in both themes, so the codes always scan. Japanese uses the system's Japanese font. */

@font-face { font-family: "Geologica"; src: url("/fonts/geologica-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geologica"; src: url("/fonts/geologica-latin-ext.woff2") format("woff2"); font-weight: 300 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geologica"; src: url("/fonts/geologica-cyrillic.woff2") format("woff2"); font-weight: 300 800; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; src: url("/fonts/geologica-cyrillic-ext.woff2") format("woff2"); font-weight: 300 800; font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

:root {
  --ground: #E7F0EB;
  --band: #F7FAF8;
  --ink: #151A35;
  --muted: #4B5367;
  --line: #C6D4CC;
  --scan: #0E9C78;
  --ok: #0C6A50;
  --ok-bg: #D7F2E8;
  --warn: #9B1C14;
  --warn-bg: #FBE6E3;
  --card: #F1F3FA;
  --btn: #151A35;
  --btn-text: #FFFFFF;
  --plate: #C3CAD2;
  --plate-edge: #A7B0BA;
  --phone: #151A35;
  --shadow: rgba(21, 26, 53, .16);
  --font: "Geologica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #11152B;
    --band: #161B36;
    --ink: #E9EDF7;
    --muted: #B3BBD0;
    --line: #2C3459;
    --scan: #6EE7B7;
    --ok: #7FE7BF;
    --ok-bg: #12382F;
    --warn: #FFB4AB;
    --warn-bg: #4A1E1A;
    --card: #1F2546;
    --btn: #6EE7B7;
    --btn-text: #0E1330;
    --plate: #49536A;
    --plate-edge: #5C6782;
    --phone: #050714;
    --shadow: rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 18px/1.6 var(--font); font-variation-settings: "SHRP" 30; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--scan); }
:focus-visible { outline: 3px solid var(--scan); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--scan); color: var(--btn-text); }
h1, h2 { font-weight: 600; font-variation-settings: "SHRP" 100; letter-spacing: -.015em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: clamp(38px, 4.8vw, 64px); }
h2 { font-size: clamp(30px, 3.8vw, 50px); }
h3 { font-size: 20px; font-weight: 600; font-variation-settings: "SHRP" 100; line-height: 1.3; }
:lang(ja) h1, :lang(ja) h2 { letter-spacing: 0; line-height: 1.25; }
:lang(ja) :is(h1, h2, h3, .sticker-title) { word-break: auto-phrase; }
:lang(ja) body { line-height: 1.8; }
.lead { font-size: 20px; }
.quiet { font-size: 15px; color: var(--muted); }
.narrow { max-width: 40em; }
.nw { white-space: nowrap; }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 14px; border-radius: 8px; background: var(--btn); color: var(--btn-text); font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- header */

.top { position: sticky; top: 0; z-index: 10; background: var(--ground); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }
.bar { display: flex; align-items: center; gap: 22px; max-width: 1180px; min-height: 68px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 21px; font-weight: 600; font-variation-settings: "SHRP" 100; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.top nav { display: flex; gap: 22px; margin-left: auto; }
.top nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--muted); }
.top nav a:hover { color: var(--ink); }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu .chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.lang-menu[open] .chev { transform: rotate(180deg); }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 170px; padding: 6px; display: grid; gap: 2px; background: var(--band); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px -10px var(--shadow); }
.lang-menu a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; font-size: 15px; }
.lang-menu a:hover { background: var(--ground); }
.lang-menu a[aria-current] { font-weight: 700; }

/* ---------------------------------------------------------------- buttons */

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 12px; background: var(--btn); color: var(--btn-text); font: 600 16px/1 var(--font); text-decoration: none; transition: transform .12s cubic-bezier(.4, 0, .2, 1); }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-small { min-height: 40px; padding: 0 16px; font-size: 14.5px; }

/* ---------------------------------------------------------------- stickers, scan frames and result cards */

.scene { position: relative; display: grid; justify-items: center; padding: 8px 0 0; }
.sticker { position: relative; width: min(300px, 82%); padding: 20px 22px 18px; border-radius: 16px; background: #FFFFFF; color: #10131F; text-align: center; box-shadow: 0 2px 4px rgba(16, 19, 31, .12), 0 18px 34px -16px rgba(16, 19, 31, .35); transform: rotate(-3deg); }
.sticker-title { font-size: 25px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-variation-settings: "SHRP" 100; }
:lang(ja) .sticker-title { letter-spacing: .02em; }
.sticker-sub { margin-top: 6px; font-size: 13px; color: #4B5367; }
.target { position: relative; margin: 18px 8% 14px; }
.code { width: 100%; height: auto; }
.code-bg { fill: #FFFFFF; }
.code-ink { fill: #10131F; }
/* the scan frame: a rounded border masked down to its four corners, so the corners keep their size on wide codes */
.frame { --arm: 46px; position: absolute; inset: -14px; border: 5px solid var(--scan); border-radius: 18px;
  -webkit-mask: conic-gradient(at var(--arm) var(--arm), #0000 75%, #000 0) 0 0 / calc(100% - var(--arm)) calc(100% - var(--arm));
  mask: conic-gradient(at var(--arm) var(--arm), #0000 75%, #000 0) 0 0 / calc(100% - var(--arm)) calc(100% - var(--arm)); }
.result { width: min(330px, 92%); margin-top: -18px; justify-self: end; padding: 16px 18px; border-radius: 18px; background: var(--card); box-shadow: 0 2px 4px var(--shadow), 0 22px 40px -18px var(--shadow); position: relative; z-index: 1; }
.result-kind { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.result-kind img { width: 24px; height: 24px; border-radius: 6px; }
.result-kind span { font-weight: 700; color: var(--ink); }
.result-url { margin-top: 10px; font: 400 15px/1.45 var(--mono); overflow-wrap: break-word; }
.result-url .dim { color: var(--muted); }
.result-url b { font-weight: 700; color: var(--ink); }
.result-ok { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); font-size: 14px; font-weight: 600; }
.result-ok::before { content: ""; width: 14px; height: 8px; border: solid currentColor; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -2px); flex: none; }
.result-warn { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.result-warn li { display: flex; gap: 8px; }
.result-warn li::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--warn); color: var(--warn-bg); font-size: 12px; font-weight: 800; flex: none; margin-top: 1px; }
.scene figcaption, .specimen figcaption, .phone-fig figcaption { margin-top: 18px; justify-self: start; max-width: 34em; font-size: 14px; color: var(--muted); }
figcaption span { font-weight: 700; color: var(--ink); margin-right: 4px; }

/* the parking meter's plate */
.plate { width: min(360px, 92%); padding: 30px 28px 26px; border-radius: 14px; background: var(--plate); border: 2px solid var(--plate-edge); position: relative; }
.plate::before, .plate::after { content: ""; position: absolute; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--plate-edge); box-shadow: 0 calc(100% + 0px) 0 transparent; }
.plate::before { left: 10px; }
.plate::after { right: 10px; }
.plate .sticker { width: 100%; transform: none; }

/* ---------------------------------------------------------------- sections */

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(32px, 6vw, 80px) clamp(64px, 9vw, 120px); }
.hero-text { display: grid; gap: 26px; justify-items: start; }
.sub { font-size: 20px; color: var(--muted); max-width: 30em; }
.note { margin-top: -10px; font-size: 14px; color: var(--muted); }

.check { padding-block: clamp(56px, 8vw, 112px); }
.check-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px clamp(32px, 6vw, 96px); align-items: center; }
.check-text { display: grid; gap: 20px; }
.tricks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.tricks li { position: relative; padding-left: 18px; font-size: 16px; }
.tricks li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 2px; background: var(--warn); }

.codes { padding-block: clamp(56px, 8vw, 112px); background: var(--band); border-block: 1px solid var(--line); }
.codes h2 { margin-bottom: 16px; }
.specimen { margin-top: clamp(32px, 5vw, 56px); }
/* the list is inset by the frame's overhang, so the frames line up with the text column */
.specimen ul { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 48px clamp(40px, 5vw, 64px); padding-inline: 11px; }
.specimen li { display: grid; gap: 14px; justify-items: center; font-size: 15px; font-weight: 600; }
.specimen .target { margin: 0; padding: 14px; background: #FFFFFF; border-radius: 6px; box-shadow: 0 1px 3px rgba(16, 19, 31, .15); }
.specimen .code-qr, .specimen .code-aztec { width: 150px; }
.specimen .code-pdf417 { width: 230px; }
.specimen .code-code128 { width: 220px; height: 90px; }
.specimen .target { margin: 0; }
.specimen .frame { --arm: 28px; inset: -11px; border-width: 4px; border-radius: 12px; }
.codes-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px clamp(32px, 5vw, 72px); margin-top: clamp(40px, 6vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); }
.codes-more > p { color: var(--muted); }
.codes-more h3 { margin-bottom: 10px; }

.dashes { display: grid; gap: 10px; }
.dashes li { position: relative; padding-left: 20px; }
.dashes li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 2px; background: var(--scan); }

.actions, .keep, .privacy, .pro { padding-block: clamp(56px, 8vw, 112px); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(32px, 6vw, 96px); align-items: center; }
.split h2 { margin-bottom: 24px; }
.split h3 { margin: 22px 0 10px; }
.acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.acts dt { font-weight: 600; font-variation-settings: "SHRP" 100; }
.acts dd { color: var(--muted); font-size: 16px; }
.phones { display: flex; justify-content: center; gap: clamp(16px, 3vw, 32px); }
.phone-fig { width: min(250px, 46%); }
.phone-fig:nth-child(2) { margin-top: clamp(32px, 6vw, 72px); }
.phone { border: 7px solid var(--phone); border-radius: 30px; overflow: hidden; background: var(--phone); box-shadow: 0 22px 40px -20px var(--shadow); }
.phone img { width: 100%; height: auto; border-radius: 23px; }

.perms { justify-self: center; width: min(360px, 100%); padding: 22px 22px 14px; border-radius: 22px; background: var(--card); box-shadow: 0 22px 40px -22px var(--shadow); }
.perms-title { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.perm { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.perm svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.perm span { display: grid; font-size: 14px; color: var(--muted); }
.perm b { font-size: 17px; font-weight: 600; color: var(--ink); }
.perm-off b { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
.perm-off svg { stroke: var(--muted); }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-block: 28px 20px; }
.plans > div { padding: 4px clamp(20px, 4vw, 56px) 8px 0; }
.plans > div + div { padding-left: clamp(20px, 4vw, 56px); border-left: 1px solid var(--line); }
.plans h3 { font-size: 26px; margin-bottom: 14px; }
.ticks { display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 13px; height: 7px; border: solid var(--scan); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }

.final { padding-block: clamp(56px, 8vw, 112px) clamp(72px, 10vw, 140px); }
.final .wrap { display: grid; gap: 20px; justify-items: start; }

.doc { padding-block: 40px 80px; }
.doc .narrow { max-width: 780px; }
.doc .back { margin-bottom: 24px; font-size: 15px; }
.doc h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 12px; }
.doc h2 { font-size: 23px; margin: 34px 0 10px; }
.doc p, .doc ul { margin-bottom: 14px; }
.doc ul { list-style: disc; padding-left: 1.2em; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; }
.doc th, .doc td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; }
.nf { padding-block: 80px; }
.nf .wrap { display: grid; gap: 18px; justify-items: start; }
.nf-langs { display: grid; gap: 6px; font-size: 15px; color: var(--muted); }

.foot { padding-block: 32px 48px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot .wrap { display: grid; gap: 8px; }
.foot-links, .foot-langs { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-langs a[aria-current] { font-weight: 700; color: var(--ink); text-decoration: none; }
.foot-small { font-size: 13px; }

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 900px) {
  .top nav { display: none; }
  .lang-menu { margin-left: auto; }
  .bar .btn { display: none; }
  .hero-grid, .check-grid, .split, .codes-more { grid-template-columns: minmax(0, 1fr); }
  .check-text { order: -1; }
  .split-flip .phones { order: 2; }
}
@media (max-width: 560px) {
  .tricks, .acts, .plans { grid-template-columns: minmax(0, 1fr); }
  .plans > div + div { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 16px; }
  .specimen ul { gap: 40px 44px; }
  .specimen .code-qr, .specimen .code-aztec { width: 106px; }
}

/* ---------------------------------------------------------------- motion
   At rest everything is in focus and every frame has locked. With motion allowed, the title focuses on load and the
   frame locks onto the menu code; further down, headings focus and frames lock as they scroll into view. */

@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: focus 1s cubic-bezier(.3, .7, .2, 1) .1s both; }
  .hero .frame { animation: lock .9s cubic-bezier(.3, .7, .2, 1) .5s both; }
  .hero .result { animation: slip .7s cubic-bezier(.2, .8, .2, 1) 1.3s both; }
  .js .focus:not(.in) { filter: blur(5px); opacity: .35; font-variation-settings: "SHRP" 0; }
  .js .focus { transition: filter .8s cubic-bezier(.3, .7, .2, 1), opacity .8s, font-variation-settings .9s; }
  .js .scene-parking:not(.in) .frame, .js .specimen:not(.in) .frame { opacity: 0; transform: scale(1.25); }
  .js .scene-parking .frame, .js .specimen .frame { transition: opacity .5s, transform .8s cubic-bezier(.3, .7, .2, 1); }
  .js .specimen li:nth-child(2) .frame { transition-delay: .15s; }
  .js .specimen li:nth-child(3) .frame { transition-delay: .3s; }
  .js .specimen li:nth-child(4) .frame { transition-delay: .45s; }
  .js .scene-parking:not(.in) .result { opacity: 0; transform: translateY(18px); }
  .js .scene-parking .result { transition: opacity .6s .6s, transform .7s .6s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes focus { from { filter: blur(6px); opacity: .3; font-variation-settings: "SHRP" 0; } }
@keyframes lock { 0% { opacity: 0; transform: scale(1.3); } 70% { opacity: 1; transform: scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes slip { from { opacity: 0; transform: translateY(20px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}