/* dafnaki.com — the site's own look. Layout: a framed photo hero under a floating bar, calm cool-grey sections,
   the working tool in the middle, one deep navy band. One face (Assistant): light and tight for display, semibold for labels. */
:root {
  --veil: #D4DADC;      /* page */
  --card: #C9D0D3;      /* sunk cards */
  --lift: #F7F6F5;      /* bar, inputs, lifted cards */
  --ink: #0B2E3C;       /* text, buttons, the dark band */
  --ink-2: #3F5B67;     /* secondary text */
  --ink-3: #6E8690;     /* hints */
  --navy-2: #163F4E;    /* cards inside the dark band */
  --mist: #B8CDD4;      /* text on navy, hover wash */
  --solar: #FFE96F;     /* the accent, used sparingly */
  --ok: #2F7D4F; --err: #B44E4E;
  --paper: #FFFFFF; --paper-ink: #1C1815;
  --face: "Assistant", "Segoe UI", Arial, sans-serif;
  --body: var(--face); --mono: var(--face); --display: var(--face);
  --frame: clamp(10px, 1.6vw, 24px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* names library.css uses */
  --canvas: var(--lift); --inset: #E6E9E9; --rule: #C3CCCF; --rule-strong: #A9B6BB; --on-dark: var(--lift); --violet-2: var(--ink);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--veil); color: var(--ink); font-family: var(--face); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; direction: rtl; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--veil); }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

.wrap { max-width: 1440px; margin: 0 auto; padding-left: max(var(--frame), env(safe-area-inset-left, 0px)); padding-right: max(var(--frame), env(safe-area-inset-right, 0px)); }
section { padding-block: clamp(72px, 9vw, 140px); }
.label { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); }
.d1 { margin: 0; font-weight: 300; font-size: clamp(40px, 6.2vw, 88px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.d2, .h2 { margin: 0; font-weight: 300; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.d3 { margin: 0; font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -.015em; }
.lead, .copy { margin: 0; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-2); max-width: 36em; }

/* ---------- buttons and links ---------- */
.btn, .pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 8px; border: 0; background: var(--ink); color: var(--lift); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.btn:hover, .pill:hover:not(:disabled) { background: var(--mist); color: var(--ink); }
.btn:active, .pill:active:not(:disabled) { transform: scale(.98); }
.pill:disabled { opacity: .35; cursor: not-allowed; }
.pill.md { height: 50px; padding: 0 24px; }
.btn.light { background: var(--lift); color: var(--ink); }
.btn.light:hover { background: var(--mist); }
/* an arrow that slides in on hover (points left: forward in Hebrew) */
.btn.arrow::after { content: "←"; display: inline-block; width: 0; opacity: 0; transform: translateX(6px); transition: width .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease); }
.btn.arrow:hover::after { width: 1em; opacity: 1; transform: none; }
.ghost-pill { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 20px; border-radius: 8px; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); cursor: pointer; font-weight: 600; font-size: 15px; transition: background .2s, border-color .2s; }
.ghost-pill:hover { background: var(--lift); border-color: var(--ink-3); }
.link { position: relative; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0 0 4px; }
.link::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .35s var(--ease); }
.link:hover::after { transform: scaleX(.35); }

/* ---------- floating bar ---------- */
.bar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--frame)); z-index: 20; margin: var(--frame) auto 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 60px; padding: 0 10px;
  border-radius: 10px; background: var(--lift); box-shadow: 0 8px 30px rgba(11,46,60,.10); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.bar.scrolled { box-shadow: 0 10px 36px rgba(11,46,60,.18); }
.bar nav { display: flex; gap: 2px; }
.bar nav a { padding: 8px 12px; border-radius: 7px; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: background .2s, color .2s; }
.bar nav a:hover { background: var(--veil); color: var(--ink); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 20px; letter-spacing: -.02em; text-decoration: none; }
.brand .mark { width: 22px; height: 22px; border-radius: 50%; background: repeating-linear-gradient(180deg, var(--ink) 0 2px, transparent 2px 4.4px); transition: transform .6s var(--ease); }
.brand:hover .mark { transform: rotate(180deg); }
.bar .end { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.bar .btn { height: 42px; }

/* ---------- hero ---------- */
.hero { position: relative; margin-top: calc(-60px - var(--frame) * .5); min-height: clamp(560px, 50vw, 780px); border-radius: 14px; overflow: hidden; display: flex; align-items: flex-end; color: var(--lift); background: var(--ink); }
.hero .photo { position: absolute; inset: -6% 0; will-change: transform; }
.hero .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(6,24,32,.62), rgba(6,24,32,.1) 62%); pointer-events: none; }
.hero .in { position: relative; z-index: 1; padding: clamp(28px, 4vw, 56px); padding-top: 140px; display: grid; gap: 22px; max-width: 780px; }
.hero .label { color: var(--mist); }
.hero .quote { margin: 0; font-size: 17px; max-width: 30em; opacity: .9; }
.hero .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 6px; }
.hero .link { color: var(--lift); }
.peek { position: absolute; z-index: 1; inset-inline-end: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 10px; text-decoration: none;
  background: rgba(247,246,245,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--lift); font-size: 14px; transition: background .25s var(--ease), transform .25s var(--ease); }
.peek:hover { background: rgba(247,246,245,.26); transform: translateY(-3px); }
.peek .mini { width: 52px; height: 66px; border-radius: 4px; background: var(--lift); padding: 7px 6px; display: grid; gap: 4px; align-content: start; }
.peek .mini i { height: 3px; border-radius: 2px; background: #C8CED0; } .peek .mini i:nth-child(1) { width: 70%; background: #8EA0A7; }
.peek b { display: block; font-weight: 600; }

/* ---------- statement ---------- */
.statement { text-align: center; display: grid; justify-items: center; gap: 28px; }
.statement .d2 { max-width: 15.5em; }
.chip { display: inline-block; width: 1.5em; height: .82em; border-radius: 6px; vertical-align: -.02em; margin: 0 .12em; background: #8FA3AB repeating-linear-gradient(180deg, rgba(11,46,60,.55) 0 2px, transparent 2px 7px); }
.chip.dark { background: #2E4C57 repeating-linear-gradient(180deg, rgba(247,246,245,.5) 0 2px, transparent 2px 7px); }
.fact { font-size: 15px; font-weight: 600; color: var(--ink-2); }

/* ---------- three cards ---------- */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tcard { position: relative; min-height: clamp(380px, 33vw, 470px); border-radius: 12px; background: var(--card); padding: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.tcard:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(11,46,60,.45); }
.tcard .d3, .tcard p { position: relative; z-index: 1; }
.tcard p { margin: auto 0 0; max-width: 22em; color: var(--ink-2); font-size: 15.5px; }
.tcard .art { flex: 1; display: grid; place-items: center; width: 100%; position: relative; z-index: 1; }
.tcard.photo { color: var(--lift); }
.tcard.photo p { color: var(--lift); opacity: .9; }
.photo-fill { position: absolute; inset: 0; background: #8FA3AB radial-gradient(120% 90% at 30% 10%, #A7B9BF, #7F959D); transition: transform .8s var(--ease); }
.photo-fill.dark { background: #1B3D4A radial-gradient(120% 90% at 70% 0%, #2F5563, #0F2D39); }
.tcard:hover .photo-fill, .scard:hover .photo-fill { transform: scale(1.05); }
/* the motif: ruled exam lines */
.ruled { width: 128px; height: 128px; border-radius: 50%; background: repeating-linear-gradient(180deg, var(--ink) 0 3px, transparent 3px 9px); transition: transform .9s var(--ease); }
.ruled.half { background: linear-gradient(90deg, transparent 50%, var(--card) 50%), repeating-linear-gradient(180deg, var(--ink) 0 3px, transparent 3px 9px); box-shadow: inset 0 0 0 2px var(--ink); }
.ruled.split { background: repeating-linear-gradient(180deg, var(--ink) 0 3px, transparent 3px 9px) right / 50% 100% no-repeat, repeating-linear-gradient(180deg, var(--ink) 0 3px, transparent 3px 9px) left 0 top 4.5px / 50% 100% no-repeat; }
.tcard.photo .ruled { background: repeating-linear-gradient(180deg, var(--lift) 0 3px, transparent 3px 9px); }
.tcard:hover .ruled.spin { transform: rotate(-90deg); }

/* ---------- the working tool ---------- */
.work { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 44px); align-items: start; direction: rtl; }
.work .block { display: grid; gap: 18px; min-width: 0; }
.state { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 8px; background: var(--lift); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.state[data-s="busy"] .dot { background: var(--ink); animation: pulse 1.2s ease-in-out infinite; }
.state[data-s="ready"] .dot { background: var(--ok); }
@keyframes pulse { 50% { opacity: .25; } }
.unavailable { margin: 0; padding: 12px 16px; border-radius: 8px; background: #F2DDDA; color: var(--err); font-size: 14.5px; }
.controls { display: flex; flex-direction: column; gap: 16px; }
.drop { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 12px; border: 1.5px dashed #9AAAB0; background: var(--lift); cursor: pointer; text-align: right; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease); }
.drop:hover, .drop.over { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(11,46,60,.5); }
.drop .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--lift); display: grid; place-items: center; flex: none; transition: transform .35s var(--ease); }
.drop:hover .ic { transform: translateY(-3px); }
.drop .ic svg { width: 20px; height: 20px; }
.drop strong { display: block; font-weight: 600; }
.drop small { display: block; color: var(--ink-3); font-size: 14px; }
.pages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pages:empty { display: none; }
.prow { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--lift); animation: rowin .35s var(--ease); }
@keyframes rowin { from { opacity: 0; transform: translateY(6px); } }
.prow .thumb { width: 38px; height: 50px; border-radius: 4px; background: #E3E6E6; overflow: hidden; display: grid; place-items: center; }
.prow .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.prow .meta { display: flex; flex-direction: column; min-width: 0; }
.prow .name { font-weight: 600; font-size: 14.5px; }
.prow .st { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .st.busy { color: var(--ink); } .prow .st.done { color: var(--ok); } .prow .st.err { color: var(--err); white-space: normal; }
.prow .tools { display: flex; }
.icon-btn { border: 0; background: transparent; color: var(--ink-3); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.icon-btn:hover { background: var(--veil); color: var(--ink); }
.icon-btn:disabled { opacity: .3; cursor: default; background: transparent; }
.icon-btn svg { width: 16px; height: 16px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); }
.field .input { display: flex; align-items: center; height: 48px; border-radius: 8px; border: 1px solid transparent; background: var(--lift); padding: 0 14px; transition: border-color .2s; }
.field .input:focus-within { border-color: var(--ink); }
.field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 15.5px; }
.field .ext { color: var(--ink-3); font-size: 13px; direction: ltr; }
.msg { margin: 0; font-size: 14.5px; color: var(--ink-2); min-height: 1.3em; }
.msg.err { color: var(--err); } .msg.ok { color: var(--ok); }
.divider { height: 1px; background: var(--rule); margin: 4px 0; }
.opts { display: flex; flex-direction: column; gap: 16px; }
.opt { display: flex; flex-direction: column; gap: 8px; }
.opt > span { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--card); }
.seg button { flex: 1; height: 40px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font-size: 15px; cursor: pointer; transition: background .25s var(--ease), color .2s, box-shadow .25s; }
.seg button:hover:not(:disabled):not([aria-pressed="true"]) { background: rgba(247,246,245,.55); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--lift); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(11,46,60,.15); }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
.check { display: flex; align-items: center; gap: 10px; font-size: 15.5px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.view { min-width: 0; direction: rtl; background: var(--ink); border-radius: 16px; padding: clamp(14px, 2vw, 24px); position: sticky; top: 96px; }
.view-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; color: var(--mist); font-size: 14px; }
.view-top .title b { color: var(--lift); font-weight: 600; }
.tabs { display: flex; gap: 3px; padding: 3px; border-radius: 8px; background: rgba(247,246,245,.1); }
.tabs button { height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--mist); font-size: 13.5px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--lift); color: var(--ink); }
.notes { margin: 0 0 14px; padding: 12px 16px; border-radius: 10px; background: rgba(247,246,245,.08); font-size: 14.5px; display: flex; flex-direction: column; gap: 4px; color: var(--lift); }
.notes b { font-weight: 600; }
.paper { background: var(--paper); color: var(--paper-ink); border-radius: 10px; padding: clamp(22px, 3.4vw, 48px); font-family: Arial, var(--face); font-size: 16px; line-height: 1.7; display: flex; flex-direction: column; gap: 4px; min-height: 560px; }
.paper h3 { font-size: 17px; margin: 18px 0 4px; } .paper h3:first-child { margin-top: 0; }
.paper .p { margin: 0 0 6px; } .paper .indent { padding-inline-start: 28px; } .paper .center { text-align: center; }
.paper img { vertical-align: middle; display: inline; }
.paper .ln { border-bottom: 1px solid #9a9086; height: 26px; margin-inline-start: 28px; }
.paper table { border-collapse: collapse; margin: 6px auto; } .paper td, .paper th { border: 1px solid #333; padding: 4px 18px; min-width: 110px; height: 28px; }
.paper .title { text-align: center; font-weight: 700; font-size: 20px; text-decoration: underline; margin: 6px 0 14px; }
.paper .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.paper .ar { font-size: 1.22em; unicode-bidi: isolate; }
.paper .bank { border: 1px solid #333; padding: 6px 12px; text-align: center; white-space: pre-wrap; } .paper .boxed { border: 1px solid #333; padding: 6px 12px; }
.paper .gap { display: inline-block; width: 34px; }
.paper table.match { margin: 6px 0 10px; width: 92%; margin-inline-start: 28px; } .paper table.match td { border: 0; padding: 4px 6px; min-width: 0; } .paper table.match td.mid { width: 34%; }
.ghost { display: flex; flex-direction: column; gap: 13px; }
.ghost i { display: block; height: 9px; border-radius: 5px; background: #EFEDEA; }
.ghost i.h { width: 18%; height: 12px; background: #E2DED9; margin-top: 14px; } .ghost i.h:first-child { margin-top: 0; }
.ghost-note { margin: 30px 0 0; text-align: center; color: var(--ink-3); font-family: var(--face); font-size: 14.5px; }

/* ---------- sticky split with stacked cards ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.split .text { position: sticky; top: 110px; display: grid; gap: 22px; align-content: start; }
.split .acts { display: flex; gap: 22px; align-items: center; margin-top: 18px; }
.scard { position: sticky; top: 110px; height: 460px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; }
.scard + .scard { margin-top: 40px; }
.ruled.big { position: relative; width: 190px; height: 190px; background: repeating-linear-gradient(180deg, rgba(247,246,245,.85) 0 3px, transparent 3px 10px); }
.ruled.big.half { background: linear-gradient(90deg, transparent 50%, #8FA3AB 50%), repeating-linear-gradient(180deg, var(--ink) 0 3px, transparent 3px 10px); box-shadow: inset 0 0 0 2px var(--ink); }
.ruled.big.split { background: repeating-linear-gradient(180deg, rgba(247,246,245,.85) 0 3px, transparent 3px 10px) right / 50% 100% no-repeat, repeating-linear-gradient(180deg, rgba(247,246,245,.85) 0 3px, transparent 3px 10px) left 0 top 5px / 50% 100% no-repeat; }
.scard .glass { position: absolute; inset-inline: 14px; bottom: 14px; padding: 18px 20px; border-radius: 10px; background: rgba(11,46,60,.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--lift); display: grid; gap: 8px; }
.scard .glass .ico { width: 34px; height: 34px; border-radius: 7px; background: rgba(247,246,245,.18); display: grid; place-items: center; }
.scard .glass .ico svg { width: 18px; height: 18px; }
.scard .glass p { margin: 0; opacity: .88; font-size: 15px; }

/* ---------- the dark band ---------- */
.dark { background: var(--ink); color: var(--lift); padding-bottom: 60px; }
.dark .label { color: var(--mist); }
.dark .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(20px, 4vw, 60px); padding-bottom: 40px; }
.dark .d2 { color: var(--lift); }
.stats { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--navy-2); border-radius: 12px; padding: 24px; min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; transition: background .3s; }
.stat:hover { background: #1C4A5B; }
.stat .k { font-size: 14px; color: var(--mist); }
.stat .v { font-weight: 300; font-size: clamp(44px, 4.6vw, 64px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 15px; font-weight: 600; }
.ticker { overflow: hidden; direction: ltr; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker .track { display: flex; width: max-content; gap: 56px; padding-block: 10px; animation: marquee 32s linear infinite; }
.ticker span { color: #84A2AC; font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; letter-spacing: -.01em; white-space: nowrap; transition: color .3s; }
.ticker span:hover { color: var(--lift); }
.ticker:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- process ---------- */
.proc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.proc .sticky-title { position: sticky; top: 110px; display: grid; gap: 14px; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.steps li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--rule-strong); align-items: baseline; }
.steps li::before { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.steps li:hover::before { transform: scaleX(1); }
.steps .n { font-size: 14px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color .3s; }
.steps li:hover .n { color: var(--ink); }
.steps p { margin: 0; color: var(--ink-2); }

/* ---------- pricing ---------- */
.price-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 36px; }
.price-head .lead { max-width: 26em; }
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pc { background: var(--lift); border-radius: 12px; padding: 28px; display: grid; gap: 14px; align-content: start; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.pc:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(11,46,60,.4); }
.pc.feat { background: var(--ink); color: var(--lift); }
.pc .k { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); }
.pc.feat .k { color: var(--mist); }
.pc .v { font-weight: 300; font-size: 60px; line-height: 1; letter-spacing: -.035em; }
.pc .v small { font-size: 22px; font-weight: 400; letter-spacing: 0; margin-inline-start: 4px; }
.pc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.pc.feat ul { color: var(--mist); }
.pc ul li::before { content: "—"; margin-inline-end: 8px; opacity: .5; }
.pc .btn { margin-top: 8px; }
.pc.feat .btn { background: var(--solar); color: var(--ink); }
.pc.feat .btn:hover { background: var(--lift); }
.note { margin: 18px 0 0; font-size: 14.5px; color: var(--ink-2); }

/* ---------- closing band ---------- */
.cta { position: relative; border-radius: 14px; overflow: hidden; background: #9FB4BB; padding: clamp(48px, 7vw, 100px) 24px; text-align: center; display: grid; justify-items: center; gap: 20px; }
.cta::before, .cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26%; background: repeating-linear-gradient(180deg, var(--ink) 0 4px, transparent 4px 13px); transition: width .9s var(--ease); }
.cta::before { right: 0; -webkit-mask: linear-gradient(to left, #000 30%, transparent); mask: linear-gradient(to left, #000 30%, transparent); }
.cta::after { left: 0; -webkit-mask: linear-gradient(to right, #000 30%, transparent); mask: linear-gradient(to right, #000 30%, transparent); }
.cta:hover::before, .cta:hover::after { width: 32%; }
.cta > * { position: relative; z-index: 1; }
.cta .d2 { max-width: 12em; }

/* ---------- footer ---------- */
.foot { padding-block: 80px 28px; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .6fr)); gap: 28px; }
.fgrid h5 { margin: 0 0 12px; font-weight: 400; font-size: 24px; letter-spacing: -.015em; }
.fgrid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.fgrid a { text-decoration: none; } .fgrid a:hover { text-decoration: underline; text-underline-offset: 4px; }
.reach { font-weight: 300; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.25; letter-spacing: -.02em; margin: 0; }
.legal { margin-top: 70px; padding-top: 18px; border-top: 1px solid var(--rule-strong); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); }

/* ---------- motion: added by motion.js, so the page is complete without it ---------- */
.motion [data-reveal], .motion [data-rise] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.motion [data-reveal].in-view, .motion [data-rise].in-view { opacity: 1; transform: none; }
.motion .three [data-reveal]:nth-child(2), .motion .prices [data-reveal]:nth-child(2), .motion .stats [data-reveal]:nth-child(2) { transition-delay: .08s; }
.motion .three [data-reveal]:nth-child(3), .motion .prices [data-reveal]:nth-child(3), .motion .stats [data-reveal]:nth-child(3) { transition-delay: .16s; }
.motion .stats [data-reveal]:nth-child(4) { transition-delay: .24s; }
.motion .steps [data-reveal]:nth-child(2) { transition-delay: .06s; } .motion .steps [data-reveal]:nth-child(3) { transition-delay: .12s; } .motion .steps [data-reveal]:nth-child(4) { transition-delay: .18s; }
.w { display: inline-block; }
.motion [data-words] .w { opacity: 0; transform: translateY(.45em); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.motion [data-words].in-view .w { opacity: 1; transform: none; }
.motion .hero [data-rise] { transition-delay: .55s; }
.motion .hero .acts[data-rise] { transition-delay: .7s; }
.motion .hero .peek[data-rise] { transition-delay: .85s; }
[data-scrub] .w { transition: color .25s linear; }

@media (max-width: 960px) {
  .bar { grid-template-columns: auto 1fr; } .bar nav { display: none; }
  .three, .prices { grid-template-columns: minmax(0, 1fr); }
  .work, .split, .proc, .dark .grid { grid-template-columns: minmax(0, 1fr); }
  .split .text, .proc .sticky-title, .view { position: static; }
  .scard { position: relative; top: auto; height: 340px; }
  .scard + .scard { margin-top: 12px; }
  .steps li { grid-template-columns: 44px minmax(0, 1fr); } .steps li p { grid-column: 2; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fgrid > :first-child { grid-column: 1 / -1; }
  .peek { display: none; }
  .paper { min-height: 420px; }
}
@media (max-width: 520px) {
  .bar .btn { padding: 0 14px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion [data-reveal], .motion [data-rise], .motion [data-words] .w { opacity: 1 !important; transform: none !important; }
}

/* the working page */
.app-head { padding-block: clamp(44px, 6vw, 84px) 0; display: grid; gap: 14px; }
.motion .app-head [data-rise] { transition-delay: .45s; }
.work.app { padding-top: clamp(28px, 4vw, 48px); }

/* ---------- grading (/grade) ---------- */
.work.grade { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.gstep { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 6px; }
.gstep .num { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--lift); display: grid; place-items: center; font-weight: 700; }
.gstep h3 { margin: 4px 0 2px; font-size: 19px; font-weight: 600; }
.gstep h3 small { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-inline-start: 6px; }
.gstep p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.drop.small { padding: 12px 16px; } .drop.small .ic { width: 36px; height: 36px; }
.hint { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.prow.on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.prow .sname { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--ink); padding: 2px 0; min-width: 0; border-bottom: 1px dashed transparent; outline: none; }
.prow .sname:hover, .prow .sname:focus { border-bottom-color: var(--rule-strong); }
.view.flow { position: static; }
.paper.sheet { font-family: var(--face); color: var(--ink); gap: 14px; }
.sbtn { height: 36px; padding: 0 14px; border-radius: 7px; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s; }
.sbtn:hover:not(:disabled) { background: var(--inset); border-color: var(--ink-3); } .sbtn:disabled { opacity: .4; cursor: default; }
.paper.sheet .intro { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.gtab { width: 100%; border-collapse: collapse; font-size: 15px; }
.gtab th { text-align: right; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.gtab td { padding: 10px; border-bottom: 1px solid var(--inset); vertical-align: top; }
.gtab .lbl { font-weight: 700; white-space: nowrap; width: 1%; }
.gtab .pts { white-space: nowrap; width: 1%; }
.gtab input[type=number] { width: 72px; height: 36px; border-radius: 7px; border: 1px solid var(--rule); background: var(--lift); font: inherit; font-size: 15px; padding: 0 8px; color: var(--ink); }
.gtab textarea { width: 100%; min-height: 40px; border-radius: 7px; border: 1px solid var(--rule); background: var(--lift); font: inherit; font-size: 15px; padding: 6px 10px; color: var(--ink); resize: vertical; margin-top: 4px; unicode-bidi: plaintext; }
.gtab input:focus, .gtab textarea:focus { outline: none; border-color: var(--ink); }
.gtab .task { font-size: 13.5px; color: var(--ink-2); }
.gtab .part { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; } .gtab .part.warn { color: #9A5B12; }
.keyfoot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-top: 6px; }
.keyfoot > span { font-size: 15px; color: var(--ink-2); } .keyfoot b { color: var(--ink); font-size: 18px; }
.keyfoot .pill { margin-inline-start: auto; }
.class-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; justify-content: space-between; }
.class-head .big { font-size: 46px; font-weight: 300; line-height: 1; letter-spacing: -.02em; margin-inline-end: 10px; }
.class-head .sub { font-size: 14px; color: var(--ink-2); }
.class-head .acts, .phead .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.roster tr { cursor: pointer; transition: background .15s; } .roster tr:hover { background: var(--lift); }
.roster tr.on { background: var(--inset); } .roster tr:focus-visible { outline: 2px solid var(--ink); }
.roster .sc { font-weight: 700; width: 1%; white-space: nowrap; }
.roster .dots { width: 45%; } .roster .dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 2px; background: var(--rule); }
.dots i.correct { background: #1E8A4C; } .dots i.partial { background: #D9822B; } .dots i.wrong, .dots i.blank { background: #C62828; }
.pupil { border-top: 1px solid var(--rule); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.phead { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.phead h4 { margin: 0; font-size: 24px; font-weight: 400; }
.phead .score { font-size: 24px; font-weight: 700; color: #C62828; } .phead .score small { font-size: 14px; color: var(--ink-3); font-weight: 600; }
.phead .acts { margin-inline-start: auto; }
.detail .mk { display: inline-block; width: 22px; font-weight: 700; } .detail tr.correct .mk { color: #1E8A4C; } .detail tr.partial .mk { color: #D9822B; } .detail tr.wrong .mk, .detail tr.blank .mk { color: #C62828; }
.detail .given { unicode-bidi: plaintext; } .detail .why { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; } .detail .right { font-size: 13px; color: var(--ink-3); margin-top: 3px; unicode-bidi: plaintext; }
.detail .of { color: var(--ink-3); font-size: 13.5px; }
.marked { display: grid; gap: 12px; } .marked img { width: 100%; border-radius: 8px; border: 1px solid var(--rule); }
@media (max-width: 960px) { .work.grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .gtab.detail td, .gtab.key td { padding: 8px 6px; } .gtab input[type=number] { width: 60px; } .roster .dots { display: none; } }
.paper .gtab { margin: 0; } .paper .gtab td, .paper .gtab th { border: 0; border-bottom: 1px solid var(--inset); min-width: 0; height: auto; padding: 10px; }
.paper .gtab th { border-bottom-color: var(--rule); }
.brand { white-space: nowrap; }