/* The marketing homepage, and nothing else. * * The concept, one sentence, from docs/landing/03-design.md: * * The headline is the demo's own first row. * * The hero is one editorial Hebrew sentence set large on the product's warm paper, and the * working times list sits flush beside it on the same baseline grid, so the promise and the * proof are one object. The paper half of the old concept ("WARM PAPER, ONE COOL WINDOW") * survives; the window half does not, because a window is what makes a demo read as a picture * OF a product instead of the product. * * Linked from landing.html's `head_end`, after a11y.css and design.css. desk.css is NOT linked * on this page any more: the demo is drawn here, from these tokens, because the desk layer * carries Heebo and the marketing face has to reach the panel too. * * TOKENS, and no literal value anywhere. Everything below is either a --dk-* token from * static/tokens.css or a --mk-* alias of one declared in section 1. tests/test_landing.py fails * on a literal #rrggbb in this file, and on an em or en dash anywhere in it. * * RULES this file is written to: * * logical properties only. No `left`, no `right`, no `margin-left`: this page is RTL and a * physical property is a bug that only shows up in the other direction. * * cream is the page. White is an OBJECT on it: the demo panel, the guest card, the two * price panels, and nothing else. No alternating bands. * * one blue. The primary button, the selected time, the focus ring, and a link inside a * sentence. Never a filled band, never a tint behind a section. * * every boundary is a 1px rule except two shadows, and the two are the panel and the card. * * one shadow level, one focus ring, two durations. A third of anything is a decision * nobody made. */ /* ================================================================ 1. the marketing tokens ADDITIVE. Every colour, radius, shadow, focus and duration is an alias of a desk token, so this page cannot drift from the product's palette; what it adds is what a marketing page has that a desk screen does not, which is a display type scale and a section rhythm. */ :root{ --mk-font:'Bookie Sans','Bookie Fallback','Arial Hebrew',Arial,system-ui,sans-serif; --mk-paper:var(--dk-canvas); --mk-object:var(--dk-surface); --mk-object-2:var(--dk-surface-2); --mk-well:var(--dk-well); --mk-ink:var(--dk-ink); --mk-ink-2:var(--dk-ink-2); --mk-rule:var(--dk-line); --mk-rule-strong:var(--dk-line-strong); --mk-rule-control:var(--dk-line-control); --mk-brand:var(--dk-brand); --mk-brand-hover:var(--dk-brand-hover); --mk-brand-ink:var(--dk-brand-ink); --mk-brand-tint:var(--dk-brand-tint); --mk-brand-line:var(--dk-brand-line); --mk-ok:var(--dk-ok); /* Type. Both ends of every clamp are rem and the middle term is rem + vw, never bare vw: the accessibility widget resizes text by writing a percentage onto , and a bare vw middle term would freeze at 200% zoom and fail the 5568 text resize requirement. letter-spacing stays `normal` at every size. Tightening Hebrew closes the counters, and it is the single most common Hebrew typography mistake on a page somebody designed. */ --mk-t-display:600 clamp(2.125rem, 1.05rem + 4.8vw, 3.5rem)/1.08 var(--mk-font); --mk-t-h2:600 clamp(1.625rem, 1.17rem + 2vw, 2.25rem)/1.18 var(--mk-font); --mk-t-h3:600 clamp(1.125rem, 1.02rem + .47vw, 1.375rem)/1.3 var(--mk-font); --mk-t-lede:400 clamp(1.0625rem, .96rem + .47vw, 1.25rem)/1.55 var(--mk-font); --mk-t-body:400 1rem/1.65 var(--mk-font); --mk-t-strong:500 1rem/1.5 var(--mk-font); --mk-t-meta:400 .875rem/1.5 var(--mk-font); --mk-t-micro:500 .8125rem/1.4 var(--mk-font); --mk-t-num:600 clamp(2.25rem, 1.6rem + 2.9vw, 3.25rem)/1 var(--mk-font); --mk-t-step:600 clamp(2.5rem, 1.8rem + 3.1vw, 3.75rem)/1 var(--mk-font); --mk-measure:34ch; --mk-measure-body:46ch; /* Spacing: the desk's own steps, plus three section scale steps the desk has no use for. Nothing between 40 and 72, so a section can only be one of three heights. */ --mk-s1:var(--dk-s2); --mk-s2:var(--dk-s4); --mk-s3:var(--dk-s5); --mk-s4:var(--dk-s6); --mk-s5:var(--dk-s7); --mk-s6:var(--dk-s8); --mk-s7:var(--dk-s9); --mk-s8:var(--dk-s10); --mk-s9:clamp(3rem, 2rem + 4.4vw, 4.5rem); --mk-s10:clamp(4.5rem, 3rem + 6.7vw, 7rem); --mk-s11:clamp(6rem, 4rem + 8.9vw, 9rem); --mk-gutter:clamp(1.25rem, .6rem + 2.9vw, 2.5rem); --mk-max:1200px; --mk-r:var(--dk-r); --mk-r-md:var(--dk-r-md); --mk-shadow:var(--dk-shadow); --mk-focus:var(--dk-focus); --mk-focus-offset:var(--dk-focus-offset); --mk-dur:var(--dk-dur); --mk-dur-2:var(--dk-dur-2); --mk-ease:var(--dk-ease); --mk-tap:var(--dk-tap); --mk-head-h:64px; } /* ================================================================ 2. the page's ground THE TRAP, and it is why this block exists at all (docs/landing/01-audit.md finding 10): design.css declares --font once on :root and BAKES it into --t-display ... --t-gutter at :root. A custom property's var() references are substituted at computed value time on the element where the property is declared, so those tokens carry Heebo whatever --font says further down the tree. Redeclaring --font alone on body.lp changes nothing that uses a --t-* token, which is every heading and every body run any shared component draws on this page. So the SET is redeclared here, same values, new family. */ body.lp{ background:var(--mk-paper); color:var(--mk-ink); font:var(--mk-t-body); --font:var(--mk-font); --t-display:600 2.5rem/1.15 var(--mk-font); --t-h1:600 2rem/1.18 var(--mk-font); --t-h2:600 1.5rem/1.25 var(--mk-font); --t-h3:600 1.1875rem/1.35 var(--mk-font); --t-body-lg:400 1.1875rem/1.55 var(--mk-font); --t-body:400 1.0625rem/1.55 var(--mk-font); --t-caption:400 .9375rem/1.45 var(--mk-font); --t-button:500 1.125rem/1 var(--mk-font); --t-time:600 1.375rem/1.15 var(--mk-font); --t-time-lg:600 1.75rem/1.15 var(--mk-font); --t-gutter:400 .8125rem/1 var(--mk-font); } /* Every link on this page is styled and none is a browser default. design.css sets a{color:var(--brand)} for the product, where a link is rare and a blue one reads correctly; on a Hebrew marketing page, blue underlined text is the loudest "1998" signal there is. tests/test_landing.py measures the computed colour of every anchor through CDP. */ body.lp a{color:var(--mk-ink); text-decoration:none} body.lp a:hover{text-decoration:underline; text-underline-offset:.22em} body.lp a:focus-visible, body.lp button:focus-visible, body.lp summary:focus-visible{outline:var(--mk-focus); outline-offset:var(--mk-focus-offset); text-decoration:none; border-radius:var(--mk-r)} body.lp main.mk{width:100%; max-width:none; margin:0; padding:0} /* The one visually hidden helper this page needs. Same shape as the desk's .dk-sr. */ .mk-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0} /* ================================================================ 3. the header On the cream, not on a white bar, and with no shadow. One hairline appears once the page has moved, and it is the only thing about the bar that ever changes. A scroll timeline, so "on scroll" is literal and costs no listener; a browser without one simply never draws the rule. */ .mk-head{position:sticky; inset-block-start:0; z-index:30; background:var(--mk-paper); border-block-end:1px solid transparent} @supports (animation-timeline:scroll()){ .mk-head{animation:mk-head linear both; animation-timeline:scroll(root); animation-range:0 24px} } @keyframes mk-head{ from{border-block-end-color:transparent} to{border-block-end-color:var(--mk-rule)} } .mk-head-in{max-width:var(--mk-max); margin-inline:auto; min-height:var(--mk-head-h); padding-inline:var(--mk-gutter); display:flex; align-items:center; gap:var(--mk-s3)} /* 44 on BOTH axes, which is what 00-brief.md section 15 asks for and what the demo's own controls already had: the wordmark was 97x42 and the two shortest nav labels were 34 and 39 wide (QA-L3). All three clear WCAG 2.5.8's 24x24 either way; this is the brief's floor. */ .mk-brand{display:flex; align-items:center; padding-block:var(--mk-s2); min-height:var(--mk-tap)} .mk-brand img{display:block; height:26px; width:auto} .mk-sheet{display:contents} .mk-nav{display:flex; align-items:center; gap:var(--mk-s5); margin-inline-start:var(--mk-s5)} .mk-nav a,.mk-signin{font:var(--mk-t-strong); color:var(--mk-ink-2); display:inline-flex; align-items:center; justify-content:center; min-height:var(--mk-tap); min-width:var(--mk-tap); transition:color var(--mk-dur) var(--mk-ease)} .mk-nav a:hover,.mk-signin:hover{color:var(--mk-ink)} .mk-signin{margin-inline-start:auto} .mk-burger{display:none} .mk-head-cta{margin-inline-start:var(--mk-s3)} /* ================================================================ 4. buttons ONE filled button on the page, repeated at four scroll depths with the same words. No pill: the avoid list names pill overuse, so the only rounded control uses the panel's radius. */ .mk-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:var(--mk-tap); padding-inline:var(--mk-s4); border-radius:var(--mk-r-md); border:1px solid transparent; font:var(--mk-t-strong); text-decoration:none; cursor:pointer; background:none; color:var(--mk-ink); transition:background-color var(--mk-dur) var(--mk-ease), color var(--mk-dur) var(--mk-ease)} .mk-btn.primary{background:var(--mk-brand); color:var(--mk-brand-ink); font-weight:600} .mk-btn.primary:hover{background:var(--mk-brand-hover); text-decoration:none} .mk-btn-lg{min-height:52px; padding-inline:var(--mk-s6); font-size:1.0625rem} .mk-btn .ic{flex:none} /* ================================================================ 5. section rhythm Three heights and no fourth, all from the scale, and NO rule between sections: air does the separating, which is what every reference in the research folder does. */ .mk-sec{padding-block:var(--mk-s10); padding-inline:var(--mk-gutter)} .mk-sec > *{max-width:var(--mk-max); margin-inline:auto} .mk-sec h2{font:var(--mk-t-h2); color:var(--mk-ink); margin:0 0 var(--mk-s4); max-width:22ch; letter-spacing:normal} .mk-sec h3{font:var(--mk-t-h3); color:var(--mk-ink); margin:0 0 var(--mk-s2)} /* The section's OWN paragraphs, by the child combinator and not by descent: a blanket `.mk-sec p` is (0,1,1) and quietly beats every component rule written after it, which is how a white button label on the guest card ends up muted ink at a 46ch measure. */ .mk-sec > p,.mk-steps p,.mk-grid p,.mk-ext-copy p{margin:0; color:var(--mk-ink-2); max-width:var(--mk-measure-body)} /* Prefixed, so it wins over the h2 rule's margin shorthand above. */ .mk-sec .mk-center,.mk-center{text-align:center; margin-inline:auto} .mk-center > p{margin-inline:auto} .mk-lede{font:var(--mk-t-lede); color:var(--mk-ink-2); max-width:var(--mk-measure)} .mk-eyebrow{font:var(--mk-t-micro); color:var(--mk-ink-2); margin:0 0 var(--mk-s3)} .mk-micro{font:var(--mk-t-meta); color:var(--mk-ink-2)} .mk-nowrap{white-space:nowrap} /* A run whose direction is known and fixed: a URL, a time, an address. Isolated in CSS rather than with control characters, so the string in the dictionary stays a string. */ .mk-ltr{direction:ltr; unicode-bidi:isolate} /* ================================================================ 6. the hero Copy in five columns, the panel in seven. The hero's inline end padding is ZERO on purpose: the panel runs off the viewport's edge instead of sitting inside a frame, which is the whole difference between a piece of the product and a picture of a window. */ .mk-hero{padding-block:var(--mk-s11) var(--mk-s10); padding-inline:var(--mk-gutter) var(--mk-gutter)} .mk-hero-in{max-width:var(--mk-max); margin-inline:auto; display:grid; gap:var(--mk-s7)} .mk-hero-copy h1{font:var(--mk-t-display); color:var(--mk-ink); margin:0 0 var(--mk-s4); max-width:12ch; letter-spacing:normal; text-wrap:balance} .mk-hero-copy .mk-lede{margin:0 0 var(--mk-s5)} .mk-hero-copy .mk-micro{margin:var(--mk-s3) 0 0} @media (min-width:1024px){ .mk-hero{padding-inline:var(--mk-gutter) 0} .mk-hero-in{max-width:calc(var(--mk-max) + var(--mk-gutter)); margin-inline-end:0; grid-template-columns:5fr 7fr; align-items:center; gap:var(--mk-s9)} /* The panel is cropped by the viewport, so the two corners on that edge are not drawn. */ .mk-hero .mk-panel{border-start-end-radius:0; border-end-end-radius:0; border-inline-end:0} } /* The bleed above pins the WHOLE hero container to the inline-end edge, which reads as designed only while the viewport is near --mk-max: the copy column then sits on the shared content edge. On a wide monitor the pinned container drags everything to one side and opens a dead field on the other; centring the section instead (the first fix, 2026-09-02) floated a small island in open paper and killed the bleed the concept lives on. So on wide monitors the two columns are re-anchored separately: the copy returns to the same content edge every centred section sits on ((100% - max)/2 equals their computed edge), and the panel alone keeps running off the viewport edge, capped so the form inside never stretches into a parody. The open paper lands BETWEEN the anchored columns, where it reads as air. */ @media (min-width:1600px){ .mk-hero{padding-inline:calc((100% - var(--mk-max)) / 2) 0} .mk-hero-in{max-width:none; grid-template-columns:minmax(0, 30rem) minmax(0, 52rem); justify-content:space-between} } /* ================================================================ 7. the demo panel White on the paper, one rule, one shadow, and no chrome of any kind: no toolbar, no dots, no fake URL bar. The panel's own height never changes as the times list does, which is what the min-height on the list is for: the hero must not reflow while somebody is reading it. */ .mk-demo{display:block} .mk-demo-note{font:var(--mk-t-micro); color:var(--mk-ink-2); margin:0 0 var(--mk-s2)} .mk-panel{background:var(--mk-object); border:1px solid var(--mk-rule); border-radius:var(--mk-r-md); box-shadow:var(--mk-shadow); padding:var(--mk-s4) var(--mk-s4) var(--mk-s5)} .mk-panel-head{font:var(--mk-t-meta); color:var(--mk-ink-2); margin:0 0 var(--mk-s3); padding-block-end:var(--mk-s3); border-block-end:1px solid var(--mk-rule)} .mk-panel-title{font:var(--mk-t-strong); color:var(--mk-ink)} .mk-dot{color:var(--mk-rule-strong)} .mk-label{font:var(--mk-t-meta); color:var(--mk-ink-2); margin:0 0 var(--mk-s2)} /* chips */ .mk-chips{list-style:none; margin:0 0 var(--mk-s4); padding:0; display:flex; flex-wrap:wrap; gap:var(--mk-s2)} .mk-chip{display:inline-flex; align-items:center; gap:var(--mk-s2); min-height:36px; padding-inline:var(--mk-s3); border-radius:var(--mk-r); border:1px solid var(--mk-rule-strong); background:var(--mk-object-2); font:var(--mk-t-strong); color:var(--mk-ink); transition:opacity var(--mk-dur) var(--mk-ease), border-color var(--mk-dur) var(--mk-ease)} /* The remove affordance is the one place cobalt appears inside the chip row, and only on hover or focus: at rest it is the ink at low emphasis. 44px of target inside a 36px chip, achieved with a negative margin rather than by growing the chip, so the row keeps its density and the phone still gets its floor. */ .mk-chip-act{appearance:none; background:none; border:0; cursor:pointer; padding:0; min-width:var(--mk-tap); min-height:var(--mk-tap); margin-inline-end:calc(var(--mk-s3) * -1); display:inline-flex; align-items:center; justify-content:center; color:var(--mk-ink-2); font:var(--mk-t-strong)} .mk-chip-act:hover{color:var(--mk-brand)} /* The add control and the two people who are not in the meeting yet. A dashed rule says "not here yet" without spending a second colour on it. */ .mk-chip.is-add,.mk-chip.is-more{background:none; border-style:dashed; color:var(--mk-ink-2)} .mk-chip.is-add:hover,.mk-chip.is-more:hover{border-color:var(--mk-brand-line)} .mk-chip.is-add{padding-inline:0} .mk-chip.is-add .mk-chip-act{padding-inline:var(--mk-s3); margin-inline-end:0; min-width:0; color:var(--mk-ink-2)} .mk-chip.is-more .mk-chip-act{margin-inline-end:calc(var(--mk-s2) * -1); min-width:var(--mk-tap)} /* the count line and the times */ .mk-count{font:var(--mk-t-strong); color:var(--mk-ink); margin:0 0 var(--mk-s2)} .mk-times{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--mk-s1); min-height:calc(3 * 56px + 2 * var(--dk-s2))} /* The ROW is the li, so the static page and the upgraded one are the same shape: the script only moves the row's own words into a button that fills it. */ .mk-time{display:flex; align-items:center; gap:var(--mk-s3); min-height:56px; padding-inline:var(--mk-s3); border:1px solid var(--mk-rule); border-radius:var(--mk-r); background:var(--mk-object); font:var(--mk-t-body); color:var(--mk-ink); transition:border-color var(--mk-dur) var(--mk-ease), background-color var(--mk-dur) var(--mk-ease)} .mk-time > button{flex:1 1 auto; display:flex; align-items:center; gap:var(--mk-s3); min-height:54px; margin-inline:calc(var(--mk-s3) * -1); padding-inline:var(--mk-s3); appearance:none; background:none; border:0; font:inherit; color:inherit; text-align:start; cursor:pointer} .mk-time:hover{border-color:var(--mk-rule-control)} /* Selected states its selection with a rule, a ground and a check, never by turning the label blue: blue text on cream is 4.74:1 and passes only at 16px/500, and colour is never the only signal anyway. */ .mk-time.is-on{border-color:var(--mk-brand); background:var(--mk-brand-tint)} .mk-time-day{font:var(--mk-t-strong); color:var(--mk-ink)} .mk-time-hours{color:var(--mk-ink-2); font-variant-numeric:tabular-nums} .mk-time .mk-check{margin-inline-start:auto; color:var(--mk-brand); display:none} .mk-time.is-on .mk-check{display:inline-flex} .mk-more{font:var(--mk-t-meta); color:var(--mk-ink-2); margin:var(--mk-s2) 0 0} /* the mode control */ .mk-mode{margin-block-start:var(--mk-s4)} .mk-seg{list-style:none; margin:0; padding:4px; display:flex; gap:4px; background:var(--mk-well); border-radius:var(--mk-r)} .mk-seg-opt{flex:1 1 0; display:flex; align-items:center; justify-content:center; min-height:var(--mk-tap); border-radius:var(--mk-r); border:1px solid transparent; font:var(--mk-t-strong); color:var(--mk-ink-2); text-align:center; transition:background-color var(--mk-dur) var(--mk-ease), color var(--mk-dur) var(--mk-ease)} .mk-seg-opt > button{flex:1 1 auto; min-height:var(--mk-tap); appearance:none; background:none; border:0; font:inherit; color:inherit; cursor:pointer} .mk-seg-opt.is-on{background:var(--mk-object); border-color:var(--mk-rule); color:var(--mk-ink); font-weight:600} .mk-send-to{font:var(--mk-t-meta); color:var(--mk-ink-2); margin:var(--mk-s2) 0 0} /* the action and the confirmation. With no script .mk-go is a sentence saying what the panel would do, at caption weight, because a paragraph that looks like a button and is not one is the lie this whole progressive shape exists to avoid. */ .mk-go{margin:var(--mk-s4) 0 0; font:var(--mk-t-meta); color:var(--mk-ink-2); text-align:center} .mk-go button{width:100%; min-height:var(--mk-tap); border:1px solid transparent; border-radius:var(--mk-r-md); background:var(--mk-brand); color:var(--mk-brand-ink); font:var(--mk-t-strong); font-weight:600; cursor:pointer; transition:background-color var(--mk-dur) var(--mk-ease)} .mk-go button:hover{background:var(--mk-brand-hover)} .mk-done{animation:mk-fade var(--mk-dur-2) var(--mk-ease) both} @keyframes mk-fade{from{opacity:0}to{opacity:1}} .mk-done-line{font:var(--mk-t-strong); color:var(--mk-ink); margin:0 0 var(--mk-s3); padding-block-end:var(--mk-s3); border-block-end:1px solid var(--mk-rule)} .mk-done-after{font:var(--mk-t-meta); color:var(--mk-ink-2); margin:0 0 var(--mk-s3)} .mk-done .mk-btn{width:100%} .mk-done .mk-micro{margin:var(--mk-s2) 0 0; text-align:center} .mk-reset{margin:var(--mk-s3) 0 0; text-align:center; font:var(--mk-t-meta); color:var(--mk-ink-2)} .mk-reset button{appearance:none; background:none; border:0; cursor:pointer; min-height:var(--mk-tap); padding-inline:var(--mk-s3); font:var(--mk-t-strong); color:var(--mk-ink-2); text-decoration:underline; text-underline-offset:.22em} .mk-reset button:hover{color:var(--mk-ink)} /* ================================================================ 8. how it works Three columns on the paper. The rule is the container: one above the row and one below it, and no box, no shadow, no icon anywhere in the section. */ .mk-steps{list-style:none; margin:0; padding:0; display:grid; gap:var(--mk-s6); border-block:1px solid var(--mk-rule); padding-block:var(--mk-s6)} .mk-steps li{max-width:26ch} .mk-step-n{display:block; font:var(--mk-t-step); color:var(--mk-rule-strong); margin-block-end:var(--mk-s2)} @media (min-width:768px){ .mk-steps{grid-template-columns:repeat(3, 1fr); gap:var(--mk-s7)} } /* ================================================================ 9. external participants The card is the short link drawn as an object: white, one rule, one shadow, no perspective, no phone mockup, nothing tilted. The status colour lives in the DOT and the word stays ink. */ .mk-ext-in{display:grid; gap:var(--mk-s7)} .mk-ext-copy p{margin-block-start:var(--mk-s3); max-width:44ch} .mk-card{background:var(--mk-object); border:1px solid var(--mk-rule); border-radius:var(--mk-r-md); box-shadow:var(--mk-shadow); padding:var(--mk-s4)} .mk-card-url{font:var(--mk-t-strong); color:var(--mk-ink-2); margin:0 0 var(--mk-s3); padding-block-end:var(--mk-s3); border-block-end:1px solid var(--mk-rule); overflow-wrap:anywhere} .mk-card-count{font:var(--mk-t-meta); color:var(--mk-ink-2); margin:0 0 var(--mk-s1)} .mk-card-title{font:var(--mk-t-strong); color:var(--mk-ink); margin:0 0 var(--mk-s3)} .mk-card-times{list-style:none; margin:0 0 var(--mk-s3); padding:0; display:flex; flex-direction:column; gap:var(--mk-s1)} .mk-card-times li{display:flex; gap:var(--mk-s2); align-items:center; min-height:44px; padding-inline:var(--mk-s3); border:1px solid var(--mk-rule); border-radius:var(--mk-r); font:var(--mk-t-body); color:var(--mk-ink-2); font-variant-numeric:tabular-nums} .mk-card-times li:first-child{border-color:var(--mk-brand); background:var(--mk-brand-tint)} .mk-card-go{display:flex; align-items:center; justify-content:center; min-height:var(--mk-tap); border-radius:var(--mk-r-md); background:var(--mk-brand); color:var(--mk-brand-ink); font:var(--mk-t-strong); font-weight:600; margin:0 0 var(--mk-s3); max-width:none} .mk-card-status{display:flex; align-items:center; gap:var(--mk-s2); font:var(--mk-t-meta); color:var(--mk-ink-2)} .mk-dot-ok{width:8px; height:8px; border-radius:50%; background:var(--mk-ok); flex:none} @media (min-width:1024px){ .mk-ext-in{grid-template-columns:5fr 6fr; align-items:center; gap:var(--mk-s9)} /* The argument reads first in the source and sits at the start edge; the object beside it. */ } /* ================================================================ 10. the everyday work A 2x2 whose only decoration is the rules. No numerals: numbering is section 8's device. */ .mk-grid{display:grid; gap:var(--mk-s5)} .mk-grid > div{padding-block-start:var(--mk-s5); border-block-start:1px solid var(--mk-rule)} .mk-grid p{max-width:40ch} @media (min-width:768px){ .mk-grid{grid-template-columns:1fr 1fr; column-gap:var(--mk-s7)} .mk-grid > div:nth-child(odd){padding-inline-end:var(--mk-s7); border-inline-end:1px solid var(--mk-rule)} } /* ================================================================ 11. price The price is the largest element in its panel, which is what an Israeli price panel does and what the current page did not. The annual panel's stronger rule IS the recommendation. No hover state on a panel: these are panels and not controls (QA-M5), and a border that lights under the pointer is a promise of a click that nothing answers. The control is the one button under them. */ .mk-price .mk-lede{margin-block-end:var(--mk-s7)} .mk-plans{display:grid; gap:var(--mk-s4); max-width:1120px} .mk-plan{display:block; background:var(--mk-object); border:1px solid var(--mk-rule); border-radius:var(--mk-r-md); padding:var(--mk-s5); text-align:center; transition:border-color var(--mk-dur) var(--mk-ease)} .mk-plan.is-year{border-color:var(--mk-rule-strong)} .mk-plan h3{font:var(--mk-t-strong); color:var(--mk-ink-2); margin:0 0 var(--mk-s3); display:flex; align-items:center; justify-content:center; gap:var(--mk-s2); flex-wrap:wrap} .mk-tag{font:var(--mk-t-micro); color:var(--mk-ink-2); border:1px solid var(--mk-rule-strong); border-radius:var(--mk-r); padding:2px var(--mk-s2)} .mk-amount{font:var(--mk-t-num); color:var(--mk-ink); margin:0; font-variant-numeric:tabular-nums} .mk-per{font:var(--mk-t-strong); color:var(--mk-ink); margin:var(--mk-s1) 0 var(--mk-s3)} .mk-plan-note{font:var(--mk-t-meta); color:var(--mk-ink-2); margin:0; max-width:34ch; margin-inline:auto} .mk-price-cta{margin-block-start:var(--mk-s7)} .mk-price-cta .mk-micro{margin-block-start:var(--mk-s3)} .mk-over{font:var(--mk-t-body); color:var(--mk-ink-2); margin-block-start:var(--mk-s6)} body.lp .mk-over a{color:var(--mk-brand); font-weight:500} @media (min-width:768px){ .mk-plans{grid-template-columns:1fr 1fr; gap:var(--mk-s5)} } /* ================================================================ 12. the questions Native
: the browser gives the button semantics, the expanded state, Enter, Space and a page that still opens an answer with no script at all. The rule stays put when a row opens, so the list never jumps under the reader's hand. */ .mk-qs{max-width:720px; margin-inline:0 auto; border-block-start:1px solid var(--mk-rule)} .mk-q{border-block-end:1px solid var(--mk-rule)} .mk-q summary{display:flex; align-items:center; gap:var(--mk-s3); min-height:64px; font:var(--mk-t-h3); color:var(--mk-ink); cursor:pointer; list-style:none; padding-block:var(--mk-s3)} .mk-q summary::-webkit-details-marker{display:none} .mk-q summary .ic{margin-inline-start:auto; flex:none; color:var(--mk-ink-2); transform:rotate(90deg); transition:transform var(--mk-dur-2) var(--mk-ease)} .mk-q[open] summary .ic{transform:rotate(270deg)} .mk-q p{font:var(--mk-t-body); color:var(--mk-ink-2); max-width:60ch; padding-block:0 var(--mk-s4)} /* ================================================================ 13. the final call */ .mk-final{margin-block-start:var(--mk-s10); padding-block-start:var(--mk-s9); border-block-start:1px solid var(--mk-rule)} .mk-final h2{max-width:none; margin-inline:auto} .mk-final .mk-lede{margin:0 auto var(--mk-s5)} .mk-final .mk-micro{margin-block-start:var(--mk-s3)} /* ================================================================ 14. the footer and the Google permissions line. base.html owns both; what this page does is put them on the paper and give the permissions caption its own quiet line above the copyright. That line is a Google verification surface (docs/06-google-verification.md), not a copy preference. */ body.lp .foot{background:var(--mk-paper); border-block-start:1px solid var(--mk-rule); margin-block-start:0} body.lp .foot-cols h2,body.lp .foot-cols a,body.lp .foot-legal{font:var(--mk-t-meta)} body.lp .foot-cols a{color:var(--mk-ink-2)} body.lp .foot-cols a:hover{color:var(--mk-ink)} .mk-foot-tag{font:var(--mk-t-meta); color:var(--mk-ink-2); margin:var(--mk-s2) 0 0; max-width:34ch} .lx-google-line{color:var(--mk-ink-2); max-width:80ch} body.lp .lx-google-line a{color:var(--mk-brand)} /* ================================================================ 15. the sheet A disclosure sheet, never a squeezed row. The nav element is the SAME element at both widths: a row in the bar from 900, and the panel the burger opens below it. 900 AND NOT 768. A bar of four anchors, a login and the offer needs about 880px to sit on one line at this type size; 768 is one of the five widths the brief names, and there it wrapped every control in the row onto two lines (QA-M7). The sheet is the same disclosure the phone gets and it is a tablet's own idiom, so the breakpoint moved to where the row actually stops fitting rather than where a round number said it should. The JS that opens it reads the SAME query (landing-demo.js): the two have to move together or a resize leaves the nav switched off. Everything else about the phone layout is still 767, below. */ @media (max-width:899px){ .mk-head-in{min-height:56px; gap:var(--mk-s2)} .mk-burger{display:inline-flex; align-items:center; justify-content:center; width:var(--mk-tap); height:var(--mk-tap); margin-inline-start:auto; appearance:none; background:none; border:0; color:var(--mk-ink); cursor:pointer} .mk-sheet{display:flex; flex-direction:column; background:var(--mk-paper); border-block:1px solid var(--mk-rule); padding:var(--mk-s2) var(--mk-gutter) var(--mk-s4)} /* Absolute ONLY under the script: with no script the same element is a plain stacked list inside a taller header, which is readable. An overlay nobody can close is not. */ .mk-head.is-js .mk-sheet{position:absolute; inset-inline:0; inset-block-start:100%} .mk-nav{flex-direction:column; align-items:stretch; gap:0; margin-inline-start:0} .mk-nav a,.mk-signin{min-height:56px; font:var(--mk-t-lede); font-weight:500; border-block-end:1px solid var(--mk-rule); margin-inline-start:0} .mk-signin{border-block-end:0} /* The bar is 320px of content at 360: a wordmark, a 44px control and the offer. The verb is dropped, the CTA holds its line rather than breaking "ללא עלות" onto a second one, and the wordmark gives up four pixels of height so the three still fit. */ .mk-head-cta{margin-inline-start:0; white-space:nowrap; padding-inline:var(--mk-s3); font-size:.9375rem; gap:6px} .mk-brand img{height:22px} .mk-verb{display:none} body.mk-locked{overflow:hidden} } /* ================================================================ 16. the phone */ @media (max-width:767px){ .mk-hero{padding-block:var(--mk-s9) var(--mk-s9)} .mk-hero-copy h1{max-width:14ch} .mk-hero .mk-btn-lg{width:100%} .mk-demo{margin-block-start:var(--mk-s6)} .mk-panel{padding:var(--mk-s3) var(--mk-s3) var(--mk-s4)} .mk-price-cta .mk-btn-lg,.mk-final .mk-btn-lg{width:100%} } /* Wherever the sheet is the sheet, the header is its positioning context and it does not stick: a phone's viewport is too short to spend 56px of it on a bar, and a header that is five rows tall without the script would spend all of it. */ @media (max-width:899px){ .mk-head{position:static} .mk-head-in{position:relative} } /* The utility, LAST, so it wins over any display the classes above set. A `hidden` attribute that a display rule quietly overrides is how a demo ships showing five participants. */ [hidden]{display:none}