/* getdakira.com home, Dakira 2.0 (launch spec L7–L9), both languages: centred hero with the device group, the features
   bento, and the closing "get it" section. Neutral colours only: the site's grey tokens, plus the device group's own named
   greys (--bezel, --base-1, --base-2, --notch) for the dark bezels and the laptop base. Plum is for the buttons and links
   (site.v3.css, L2), never the drawings, tiles, chips or badges. One background (L1). No CSS motion (L5). */

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(40px, 7vw, 80px) clamp(40px, 6vw, 72px);
}

.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 { max-width: 16em; line-height: 1.06; } /* "in one place" is joined by no-break spaces */
.hero-lede { margin-block-start: 20px; max-width: 40rem; color: var(--text-2); font-size: 1.125rem; }
.hero-actions { justify-content: center; margin-block-start: 28px; }

/* ---------- Device group (L7, docs/specs/2026-11-10-hero-devices-mockup.html) ----------
   A laptop (16:10 screen in a 12px dark bezel, on a base), a phone with the same bezel whose height and top/bottom edges
   match the lid, and the Notion table in front of the laptop's bottom-left corner, clear of the Dakira panel. Always the
   English, left-to-right interface (also on the Arabic page, where it is lang="en"). Every size is in --u: one mockup
   pixel. The pieces' --drop shadow is declared on each piece, so it is sized in that piece's --u (a custom property
   resolves its var() where it is declared). At every width the group is one stage with a fixed 812:410 aspect ratio,
   --u = 1/812 of its width (1px at full size), so it scales as one picture and never reflows; on phones it is simply
   smaller (owner, 2026-11-10: one row, as on desktop, instead of three stacked pieces). */
.hero-composite {
  --bezel: #1c1c20;
  --base-1: #d9d9de; --base-2: #c4c4ca; --notch: #b4b4ba;
  --u: 1px;
  direction: ltr;
  container-type: inline-size;
  max-inline-size: 812px;
  margin-block-start: clamp(36px, 6vw, 56px);
  margin-inline: auto;
  color: var(--text);
  line-height: 1.35;
  text-align: start;
  user-select: none;
}
.hero-composite :is(.lid, .phone, .db) { --drop: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgb(0 0 0 / 0.14); }
/* Dark page: a slightly lighter bezel with a hairline, so the frames read against --bg; a dark base. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-composite { --bezel: #232328; --base-1: #3a3a42; --base-2: #2a2a30; --notch: #1c1c20; }
  :root:not([data-theme="light"]) .hero-composite :is(.lid, .phone, .db) { --drop: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgb(0 0 0 / 0.5), 0 0 0 1px var(--line-2); }
}
:root[data-theme="dark"] .hero-composite { --bezel: #232328; --base-1: #3a3a42; --base-2: #2a2a30; --notch: #1c1c20; }
:root[data-theme="dark"] .hero-composite :is(.lid, .phone, .db) { --drop: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgb(0 0 0 / 0.5), 0 0 0 1px var(--line-2); }

.hc-stage b { font-weight: 600; }
.hc-stage em { font-style: normal; }
.hc-stage i { display: block; }
.hc-stage :is(span, b) { white-space: nowrap; }

/* Laptop */
.laptop { --u: min(1px, calc(100cqw / 568)); inline-size: calc(540 * var(--u)); }
.lid {
  block-size: calc(348 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  background: var(--bezel);
  box-shadow: var(--drop);
}
.screen { display: flex; flex-direction: column; block-size: calc(322 * var(--u)); overflow: hidden; border-radius: calc(6 * var(--u)); background: var(--bg); }
.base {
  position: relative;
  block-size: calc(14 * var(--u));
  margin-inline: calc(-14 * var(--u));
  border-radius: calc(2 * var(--u)) calc(2 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  background: linear-gradient(var(--base-1), var(--base-2));
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgb(0 0 0 / 0.1);
}
.base::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; margin-inline: auto;
  inline-size: calc(90 * var(--u)); block-size: calc(6 * var(--u));
  border-radius: 0 0 calc(8 * var(--u)) calc(8 * var(--u)); background: var(--notch);
}

/* Chrome with the Dakira side panel, inside the laptop screen */
.bar {
  flex: none; display: flex; align-items: center; gap: calc(6 * var(--u));
  block-size: calc(26 * var(--u)); padding-inline: calc(10 * var(--u));
  border-block-end: 1px solid var(--line); background: var(--bg-2);
}
.bar > i { flex: none; inline-size: calc(8 * var(--u)); block-size: calc(8 * var(--u)); border-radius: 50%; background: var(--line-2); }
.url {
  flex: 1; min-inline-size: 0; overflow: hidden;
  margin-inline-start: calc(8 * var(--u)); padding: calc(1 * var(--u)) calc(8 * var(--u));
  border-radius: calc(5 * var(--u)); background: var(--bg-3);
  color: var(--text-3); font-size: calc(9 * var(--u)); line-height: calc(13 * var(--u));
}
.win { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) calc(176 * var(--u)); min-block-size: 0; }
.page { display: flex; flex-direction: column; padding: calc(16 * var(--u)); overflow: hidden; }
.kicker { color: var(--text-3); font-size: calc(8.5 * var(--u)); letter-spacing: 0.08em; text-transform: uppercase; }
.hc-stage .headline { margin-block: calc(4 * var(--u)) calc(10 * var(--u)); white-space: normal; font-size: calc(14 * var(--u)); font-weight: 600; line-height: 1.25; }
.page > .ln { block-size: calc(6 * var(--u)); margin-block: calc(8 * var(--u)) 0; border-radius: calc(3 * var(--u)); background: var(--bg-3); }
.page > .ln:nth-of-type(1) { inline-size: 92%; }
.page > .ln:nth-of-type(2) { inline-size: 80%; }
.page > .ln:nth-of-type(3) { inline-size: 60%; }
.page > .ln:nth-of-type(4) { inline-size: 88%; }
.panel {
  display: flex; flex-direction: column; padding: calc(11 * var(--u));
  border-inline-start: 1px solid var(--line); font-size: calc(10.5 * var(--u));
}
.panel-title { margin-block-end: calc(8 * var(--u)); font-size: calc(12 * var(--u)); }
.card { display: flex; flex-direction: column; padding: calc(7 * var(--u)); border: 1px solid var(--line); border-radius: calc(8 * var(--u)); background: var(--bg-2); }
.card > b { font-size: calc(11 * var(--u)); }
.card > span { color: var(--text-3); font-size: calc(9.5 * var(--u)); }
.tags { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)); margin-block: calc(8 * var(--u)); }
.tags > span { padding-inline: calc(5 * var(--u)); border: 1px solid var(--line-2); border-radius: calc(5 * var(--u)); color: var(--text-2); font-size: calc(9.5 * var(--u)); }
.tags > .ai { border-style: dashed; } /* the one on-device AI suggestion (✦) */
.hc-stage .note { white-space: normal; }
.note { min-block-size: calc(34 * var(--u)); padding: calc(6 * var(--u)); border: 1px solid var(--line-2); border-radius: calc(6 * var(--u)); color: var(--text-2); font-size: calc(9.5 * var(--u)); }
/* The drawing's button is neutral (L2): the text colour, so near-black on the light page. */
.save {
  margin-block-start: auto; padding: calc(7 * var(--u)); border-radius: calc(7 * var(--u));
  background: var(--text); color: var(--bg); text-align: center; font-weight: 500;
}

/* Phone with the share sheet: the same bezel, its height = the lid's */
.phone {
  --u: min(1px, calc(100cqw / 420));
  inline-size: calc(174 * var(--u)); block-size: calc(348 * var(--u));
  padding: calc(12 * var(--u));
  border-radius: calc(30 * var(--u));
  background: var(--bezel);
  box-shadow: var(--drop);
}
.scr {
  position: relative; block-size: 100%; overflow: hidden;
  padding: calc(22 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  border-radius: calc(18 * var(--u)); background: var(--bg-2);
}
.island {
  position: absolute; inset-block-start: calc(7 * var(--u)); inset-inline: 0; margin-inline: auto;
  inline-size: calc(44 * var(--u)); block-size: calc(12 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--bezel);
}
.vid { block-size: calc(76 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--line); }
.hc-stage .vid-title { display: block; margin-block-start: calc(6 * var(--u)); white-space: normal; font-size: calc(10 * var(--u)); font-weight: 600; }
.sheet {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: flex; flex-direction: column;
  padding: calc(9 * var(--u));
  border-block-start: 1px solid var(--line); border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0;
  background: var(--bg); color: var(--text-2); font-size: calc(10 * var(--u));
}
.row {
  display: flex; justify-content: space-between;
  margin-block-start: calc(5 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u));
  border-radius: calc(7 * var(--u)); background: var(--bg-2); color: var(--text);
}
.row.on { background: var(--line); font-weight: 600; }

/* Notion table */
.db {
  --u: min(1px, calc(100cqw / 380));
  inline-size: calc(380 * var(--u));
  overflow: hidden;
  border: 1px solid var(--line-2); border-radius: calc(12 * var(--u));
  background: var(--bg); box-shadow: var(--drop);
  font-size: calc(10.5 * var(--u));
}
.db-h { display: flex; align-items: baseline; gap: calc(6 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)); border-block-end: 1px solid var(--line); font-size: calc(12.5 * var(--u)); }
.db-h > span { color: var(--text-3); font-size: calc(10.5 * var(--u)); }
.tr {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u)); border-block-end: 1px solid var(--line); color: var(--text-2);
}
.tr:last-child { border-block-end: 0; }
.tr.th { color: var(--text-3); font-size: calc(9.5 * var(--u)); }
.tr > b { color: var(--text); font-weight: 500; }
.tr em { padding-inline: calc(5 * var(--u)); border: 1px solid var(--line-2); border-radius: calc(4 * var(--u)); font-size: calc(9.5 * var(--u)); }

/* One stage with a fixed 812:410 picture at every width. Physical offsets place the drawing (it is always left to right). */
.hc-stage { --u: calc(100cqw / 812); display: block; position: relative; aspect-ratio: 812 / 410; }
.hc-stage :is(.laptop, .phone, .db) { --u: calc(100cqw / 812); position: absolute; }
.hc-stage .base { margin-inline: calc(-34 * var(--u)); }
/* stage */
.hc-stage .laptop { left: calc(70 * var(--u)); top: 0; }
.hc-stage .phone { left: calc(638 * var(--u)); top: 0; }
.hc-stage .db { left: 0; bottom: 0; z-index: 3; }
/* end stage */

/* ---------- Features bento (L8, docs/specs/2026-11-10-features-bento-mockup.html) ----------
   3 columns from 900px, 2 from 600px, 1 below. .w2 tiles span two columns at 3 columns. The 15 tiles hold 20 cells with
   the L8 spans, which can't fill rows of 3, so tile 11 ("Save from any iPhone app") is wide as well: 21 cells, 7 full rows.
   At 2 columns only tile 1 spans both (16 cells, 8 full rows). */
#features h2 { margin-block-start: 10px; }
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 600px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > .tile:first-child { grid-column: span 2; }
  .tile { min-block-size: 220px; }
}
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento > .tile.w2 { grid-column: span 2; }
}
.tile {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 18px 20px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg);
}
.tile.is-soon { border-style: dashed; border-color: var(--line-2); }
.tile h3 { font-size: 0.9375rem; }
.tile p { margin-block-start: 4px; color: var(--text-2); font-size: 0.875rem; line-height: 1.5; }
.tile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.badge {
  padding: 1px 8px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--text-2); font-size: 0.6875rem; font-weight: 500; line-height: 1.5;
}

/* Tile drawings: always the English, left-to-right interface; neutral. */
.tile-ill {
  direction: ltr;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 104px; padding: 12px;
  overflow: hidden;
  border: 1px solid var(--bg-3); border-radius: 12px; background: var(--bg-2);
  color: var(--text-2); font-size: 0.6875rem; line-height: 1.5;
  user-select: none;
}
.tile-ill b { color: var(--text); font-weight: 600; }
.tile-ill .chip { padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg); color: var(--text); font-size: inherit; }
.tile-ill .chip.ai { border-style: dashed; }
.tile-ill .kbd { padding: 3px 8px; border-radius: 6px; background: var(--bg); font-size: inherit; }
.mini {
  max-inline-size: 100%; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.06);
}
.mini.col { display: flex; flex-direction: column; gap: 6px; }
.mini.line { display: flex; align-items: center; gap: 8px; }
.mini.w160 { inline-size: 160px; }
.mini.w170 { inline-size: 170px; }
.mini.w300 { inline-size: 300px; }
.mini.quote { inline-size: 190px; }
.mini.quote > .muted { display: block; margin-block-start: 4px; }
.mini.tldr { inline-size: 170px; margin-inline-start: 14px; }
.mini .ln { display: block; block-size: 6px; border-radius: 3px; background: var(--line); }
.mini .ln.short { inline-size: 80%; }
.mini .search { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; }
.sets { display: flex; flex-direction: column; gap: 5px; max-inline-size: 100%; }
.sets > .indent { margin-inline-start: 16px; max-inline-size: calc(100% - 16px); }
.muted { color: var(--text-3); }
.tile-ill mark { padding: 0 2px; border-radius: 3px; background: var(--line); color: var(--text); }
.tile-ill svg.i { flex: none; inline-size: 22px; block-size: 22px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile-ill svg.i.big { inline-size: 34px; block-size: 34px; }
.tile-ill .say { font-size: 0.8125rem; }
@media (max-width: 599.98px) {
  .mini.tldr { margin-inline-start: 0; }
}

/* ---------- Closing: get it ---------- */
.close .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.close .wrap > p { margin-block-start: 12px; max-width: 32rem; color: var(--text-2); font-size: 1.0625rem; }
.close .actions { justify-content: center; margin-block-start: 24px; }

/* ---------- Release note (v1 only) ----------
   Owner, 2026-11-10: until Google approves 2.0, one quiet line under the hero and closing buttons says that Add to Chrome
   installs 1.0.1 and links its setup page (/chrome/). scripts/release-state.mjs adds `hidden` in the v2 state, so this rule
   sets no display of its own. Secondary text, smaller than the lede; the link keeps the site's link colour. */
.release-note { margin-block-start: 16px; max-width: 30rem; color: var(--text-2); font-size: 0.875rem; line-height: 1.5; text-wrap: pretty; }
.close .wrap > .release-note { margin-block-start: 16px; max-width: 30rem; font-size: 0.875rem; }
.release-note[hidden] { display: none; }
.release-note a { white-space: nowrap; } /* the short link never splits over two lines */

@supports (corner-shape: squircle) {
  .tile, .tile-ill { corner-shape: squircle; }
}