/* getdakira.com — shared tokens, shell and components. Neutral, Linear-style (spec §3). */

/* Self-hosted Google Sans (SIL OFL, see ../fonts/OFL.txt). Subsets are downloaded only when the page has matching characters. */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/GoogleSans-latin.v2.woff2") format("woff2");
  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: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/GoogleSans-arabic.v1.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Metric-matched fallback so the swap to Google Sans doesn't reflow. Values measured in Playwright. */
@font-face {
  font-family: "Google Sans Fallback";
  src: local("Arial");
  font-weight: 400 500;
  size-adjust: 100.3%;
  ascent-override: 96.3%;
  descent-override: 28.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Google Sans Fallback";
  src: local("Arial Bold"), local("Arial");
  font-weight: 600 700;
  size-adjust: 98.7%;
  ascent-override: 97.9%;
  descent-override: 29%;
  line-gap-override: 0%;
}

/* Tokens (spec §3, amended by the 2.0 launch spec). One background (L1): body, header, sections and footer are all --bg.
   The plum family (L2) colours only links, buttons, focus rings and the language switch, never drawings, cards, chips,
   badges, step numbers or body copy. --accent fills .btn-primary and darkens to --accent-hover; --accent-ink is plum as
   text and border on --bg (.btn-secondary; >= 4.5:1), and .btn-secondary hovers to the --accent-tint fill. --link-hover
   is a hovered link (light: the accent, 8.84:1 on white; dark: a lighter plum, 6.92:1 on #0b0b0d). The logo keeps --logo. */
:root {
  --bg: #ffffff;
  --bg-2: #f7f7f8;
  --bg-3: #efeff1;
  --line: #e4e4e7;
  --line-2: #d4d4d8;
  --text: #0f0f12;
  --text-2: #55555f;
  --text-3: #6b6b75;
  --btn: #0f0f12;
  --btn-text: #ffffff;
  --accent: #8a1f4a;        /* white on it 8.84:1 */
  --accent-hover: #731a3e;  /* white on it 10.79:1 */
  --accent-tint: #f7e9ef;   /* --accent-ink on it 7.52:1 */
  --accent-ink: #8a1f4a;    /* on --bg 8.84:1 */
  --link-hover: var(--accent-ink);
  --accent-text: #ffffff;
  --focus: #8a1f4a;
  --logo: #CB0B5B;
  --shadow: 0 1px 2px rgb(15 15 18 / 0.06), 0 8px 24px rgb(15 15 18 / 0.08);

  --font: "Google Sans", "Google Sans Fallback", system-ui, sans-serif;
  --lh-body: 1.6;
  --lh-heading: 1.2;
  /* The sticky header's height (L6), so in-page jumps and focus land below it: html's scroll-padding-top is this plus 6px
     (Ruling 9), room for a focused element's whole focus ring (2px outline + 2px offset) and the 1px GSAP lift. The header
     is exactly this tall (the bar plus its 1px hairline). */
  --header-h: 65px;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --gutter: 16px;
  --measure: 43.75rem; /* = 64ch in Google Sans; rem so the measure does not shift when the fallback font swaps */

  color-scheme: light dark;
}
@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (max-width: 639.98px) { :root { --header-h: 89px; } }

@supports (corner-shape: squircle) {
  :root { --r-sm: 12px; --r-md: 16px; --r-lg: 24px; }
  .btn { corner-shape: squircle; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0d; --bg-2: #121215; --bg-3: #18181c;
    --line: #232328; --line-2: #2e2e35;
    --text: #f4f4f5; --text-2: #a1a1aa; --text-3: #8b8b94;
    --btn: #f4f4f5; --btn-text: #0b0b0d; --accent: #d5326e; --accent-text: #ffffff; --focus: #d5326e;
    --accent-hover: #b8285c; --accent-tint: #2e1422; --accent-ink: #ee6f9c;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.4);
  }
}
:root[data-theme="dark"] {
  --bg: #0b0b0d; --bg-2: #121215; --bg-3: #18181c;
  --line: #232328; --line-2: #2e2e35;
  --text: #f4f4f5; --text-2: #a1a1aa; --text-3: #8b8b94;
  --btn: #f4f4f5; --btn-text: #0b0b0d; --accent: #d5326e; --accent-text: #ffffff; --focus: #d5326e;
  --accent-hover: #b8285c; --accent-tint: #2e1422; --accent-ink: #ee6f9c; /* white on --accent 4.66:1, on --accent-hover 6.01:1; --accent-ink on --bg 6.92:1, on --accent-tint 5.96:1 */
  --shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.4);
}

*, *::before, *::after { box-sizing: border-box; }

:lang(ar) { --lh-body: 1.85; --lh-heading: 1.45; }
/* No letter-spacing in Arabic: it breaks the joining of the letters. */
:lang(ar) :is(h1, h2, h3) { letter-spacing: 0; }
/* English pages show only one word of Arabic (the language switch, العربية). The system font draws it, so English pages
   never fetch the Arabic subset of Google Sans. */
:root:lang(en) [lang="ar"] { font-family: system-ui, sans-serif; }
/* Right-to-left pages (spec §14). Code and key caps are left-to-right islands inside Arabic text, so "ntn_" keeps its
   underscore on the right. The home device group and the bento tile drawings (home.v1.css) and the Shortcut screenshots
   keep the English interface users actually see, left to right; the page layout around them is mirrored. */
[dir="rtl"] :is(code, kbd) { direction: ltr; unicode-bidi: isolate; }
/* A quoted interface label («New integration») reads as one unit, so it never breaks across lines. */
[dir="rtl"] bdi { white-space: nowrap; }

html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: calc(var(--header-h) + 6px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: var(--lh-heading); text-wrap: balance; }
h1 { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.035em; } /* 40px / 30px */
h1:where(#hero-title) { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); } /* the home hero only: 56px / 36px (low specificity, so page layouts can still adjust it) */
h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); font-weight: 600; letter-spacing: -0.025em; }
h3 { font-size: 1.0625rem; font-weight: 600; }
p { margin: 0; }
p + p { margin-top: 0.75em; }

/* Links are text colour with a grey underline; on hover the link and its underline turn --link-hover. No CSS transitions
   (L5): hover is an instant colour change; GSAP (motion.v1.js) adds the eased button motion. Links inside the neutral
   drawings and screenshot frames stay neutral (L2). */
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
:is(.hero-composite, .bento, .shot, .step-num, .chip, .badge) a:hover { color: inherit; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

kbd, .kbd {
  font: 500 0.8125em/1 var(--font);
  padding: 0.2em 0.45em;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg-2);
  color: var(--text);
  white-space: nowrap;
}

.wrap { max-width: 1080px; margin-inline: auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip { position: absolute; inset-inline-start: 16px; inset-block-start: -100px; z-index: 10; background: var(--bg); padding: 8px 12px; border-radius: var(--r-sm); }
.skip:focus { inset-block-start: 12px; }

/* Header (L6): a full-width sticky bar on --bg with a 1px --line hairline, exactly --header-h tall. Every page copies the
   same partial: header.site-header > .wrap.site-header-inner > a.brand + nav (Features · Privacy · language switch ·
   div.nav-actions holding Get iOS Shortcut · Add to Chrome). Under 640px it is two rows: the brand and the language
   switch, then the two buttons sharing the width; the text links are hidden there (they are in the footer and on the
   home page). */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 5;
  background: var(--bg); border-block-end: 1px solid var(--line);
}
.site-header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  block-size: calc(var(--header-h) - 1px);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.0625rem;
}
.brand:hover { color: var(--text); }
.site-header nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 24px); }
.site-header nav a:not(.btn) { color: var(--text-2); text-decoration: none; font-size: 0.9375rem; }
.site-header nav a:not(.btn):hover { color: var(--link-hover); }
.site-header nav a[aria-current="page"]:not(.btn) { color: var(--text); }
.site-header .nav-actions { display: flex; align-items: center; gap: 10px; } /* the two buttons, 10px apart */
/* The language switch (spec §14) stays visible on phones. */
.site-header nav a.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-block-size: 24px; min-inline-size: 24px; }
@media (max-width: 899.98px) { .site-header nav a:not(.btn, .lang-switch) { display: none; } }
@media (max-width: 639.98px) {
  .site-header-inner { display: grid; grid-template-rows: 30px 36px; row-gap: 6px; align-content: center; justify-content: stretch; }
  .site-header nav { gap: 8px; }
  .site-header .brand { justify-self: start; }
  .site-header nav .btn { flex: 1 1 auto; min-inline-size: 0; padding-inline: 10px; } /* a long label may take two lines */
  .site-header .nav-actions { flex: 1 1 auto; min-inline-size: 0; gap: 8px; }
  .site-header nav a.lang-switch { position: absolute; inset-block-start: 8px; inset-inline-end: var(--gutter); min-block-size: 30px; }
}

/* Home (html.nav-autohide): while the hero's buttons are on screen the header's are hidden, so the page shows one pair at a
   time. motion.v1.js watches the hero buttons and adds .nav-cta-on to the header once they scroll out of view (or under
   the header), fading the pair in with GSAP. Hidden buttons leave the layout (absolute) and the tab order (visibility).
   Without JS or IntersectionObserver nothing here applies and the header always shows its buttons. On phones the header is
   one row (brand and language switch) and the buttons drop in as a bar under it, over the page, so the header's height
   never changes while you scroll. */
html.nav-autohide.js.io .site-header:not(.nav-cta-on) .nav-actions { position: absolute; visibility: hidden; }
/* Hidden on wider screens: parked at the header's end edge, inside the page, so it never widens it. */
@media (min-width: 640px) { html.nav-autohide.js.io .site-header:not(.nav-cta-on) .nav-actions { inset-block-start: 0; inset-inline-end: 0; } }
@media (max-width: 639.98px) {
  html.nav-autohide.js.io { --header-h: 53px; }
  html.nav-autohide.js.io .site-header-inner { display: flex; }
  html.nav-autohide.js.io .site-header .nav-actions {
    position: absolute; inset-block-start: 100%; inset-inline: 0;
    padding: 8px var(--gutter);
    background: var(--bg); border-block-end: 1px solid var(--line);
  }
}

/* Buttons (L3): .btn-primary, the solid plum fill, is only ever Add to Chrome. Every other button is .btn-secondary:
   transparent with a 1px --accent-ink border and text, filled with --accent-tint on hover. A bare .btn looks secondary
   too. Hover is an instant colour swap here; motion.v1.js adds the eased lift (L5). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 1px solid var(--accent-ink); border-radius: var(--r-md);
  background: transparent; color: var(--accent-ink);
  font-weight: 600; font-size: 0.9375rem; line-height: 1.2; text-align: center; text-decoration: none;
}
.btn:hover { background: var(--accent-tint); color: var(--accent-ink); }
.btn-small { min-height: 36px; padding: 0 14px; font-size: 0.875rem; gap: 6px; }
.btn.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }
/* The open-in-new icon that ends every Add to Chrome button (L4); it points outward, so it is mirrored in Arabic. */
.icon-ext { flex: none; inline-size: 1em; block-size: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .icon-ext path { transform: scaleX(-1); transform-origin: 50% 50%; transform-box: view-box; }

/* Small shared pieces */
.label { color: var(--text-3); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
:lang(ar) .label { letter-spacing: 0; text-transform: none; }
.section { border-top: 1px solid var(--line); padding-block: 48px; }
/* A jump to a section (#features, #get) lands with its top rule at the header's bottom edge, not 6px below the hairline
   (a double rule): this cancels html's 6px focus clearance. Focusable targets keep the clearance; only section anchors
   take it back. */
.section[id] { scroll-margin-block-start: -6px; }
@media (min-width: 640px) { .section { padding-block: 64px; } }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-2); color: var(--text); font-size: 0.875rem;
}

/* Shared hero-copy pieces (iOS intro, 404) */
.lede { margin-top: 20px; max-width: 33.4em; color: var(--text-2); font-size: 1.125rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--text-2); font-size: 0.875rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { color: var(--text-2); }
.site-footer nav a { display: inline-flex; align-items: center; min-block-size: 24px; }
.site-footer a:hover { color: var(--link-hover); }

/* Legal pages (privacy, terms) */
.legal { padding-block: clamp(24px, 5vw, 64px) clamp(48px, 7vw, 88px); }
.legal-head { max-width: var(--measure); margin-bottom: 32px; }
.legal-date, .legal-note { margin-top: 10px; color: var(--text-2); font-size: 0.9375rem; }
.legal-body { max-width: var(--measure); }
.legal-body h2 { margin-top: 40px; margin-bottom: 12px; font-size: 1.25rem; }
.legal-body ul { margin: 12px 0 0; padding-inline-start: 1.25em; }
.legal-body li + li { margin-top: 6px; }
.legal-body ul + p { margin-top: 12px; }
.legal-summary {
  margin-bottom: 32px; padding: 20px 24px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.legal-summary h2 { margin-top: 0; }
.legal-terms { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 10px 24px; margin: 12px 0 0; }
.legal-terms dt { font-weight: 600; }
.legal-terms dd { margin: 0; color: var(--text-2); }
@media (max-width: 560px) {
  .legal-terms { grid-template-columns: 1fr; gap: 2px; }
  .legal-terms dd + dt { margin-top: 12px; }
}
@supports (corner-shape: squircle) { .legal-summary { corner-shape: squircle; } }

/* Changelog (spec L14): the legal-page column, one article per version, newest first, split by hairlines. */
.release + .release { margin-top: 40px; border-top: 1px solid var(--line); }
.changelog .release h2 { margin-top: 0; padding-top: 40px; margin-bottom: 0; }
.release:first-child h2 { padding-top: 0; }
.release-when { margin-top: 6px; color: var(--text-2); font-size: 0.9375rem; }
.release h3 { margin-top: 24px; }
.release h3 + ul { margin-top: 8px; }
.release-when + p { margin-top: 16px; }