/* tamar.digital home page, design A ("Pixel River", illustrated).
   Loads after site.css and only affects pages with <body class="home">. Same colours, fonts and logo as before. */
.home h1,.home h2{font-family:var(--mono);font-weight:800;letter-spacing:-.025em}
.home h1{font-size:clamp(32px,5vw,58px);line-height:1.08}
.home h2{font-size:clamp(24px,3.2vw,36px)}
.home h3{font-family:var(--sans);font-weight:700}
.home .hl{position:relative;white-space:nowrap}
.home .hl::after{content:"";position:absolute;left:0;right:0;bottom:-.16em;height:.2em;background:no-repeat center/100% 100% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'><path d='M4 10c60-8 120 2 180-3s70-2 112 0' fill='none' stroke='%23D9822B' stroke-width='4' stroke-linecap='round'/></svg>")}

/* hero */
.home .hero.dark{background:linear-gradient(180deg,var(--brand-bg),var(--surface) 70%);padding-bottom:clamp(30px,5vw,56px)}
.home .hero-grid{gap:28px}
@media(min-width:940px){.home .hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.home .hero-pic{margin:0;display:flex;justify-content:center;align-items:center}
.scene-wrap{position:relative;width:430px;max-width:100%;aspect-ratio:590/520;flex:none}
.scene{position:absolute;left:0;top:0;width:590px;height:520px;transform-origin:0 0;transform:scale(.7288)}
@media(max-width:939px){.scene-wrap{width:400px}.scene{transform:scale(.678)}}
@media(max-width:560px){.scene-wrap{width:320px}.scene{transform:scale(.5424)}}
@media(max-width:360px){.scene-wrap{width:290px}.scene{transform:scale(.4915)}}
@media(prefers-reduced-motion:no-preference){.scene-wrap{animation:none}}

/* pillars and tiles */
.home .pillars.strip .pillar,.home .tiles>a.tile{box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.home .pillars.strip .pillar:hover,.home .tiles>a.tile:hover{transform:translateY(-3px)}
.home .pillar h3{font-family:var(--mono);font-size:17px}

/* cards with drawn pictures */
.illo{display:flex;align-items:flex-end;min-height:104px;margin:0 0 10px}
.illo svg{height:auto;max-width:100%;max-height:112px;width:auto}
.home .card{transition:transform .18s,box-shadow .18s;box-shadow:0 1px 2px rgba(14,42,54,.06),0 10px 24px -8px rgba(14,42,54,.14)}
.home .card:not(.tile):hover{transform:translateY(-2px)}
.home .price-card .illo{min-height:96px}
.home .price-card .pill{margin-top:4px}
.home .card h3{font-size:19px}

/* section heads: a small pixel river above each heading */
.home .sechead{position:relative}
.home .sechead::before{content:"";display:block;width:54px;height:26px;margin:0 auto 12px;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 26'><g fill='%23138A8A'><rect x='0' y='16' width='8' height='8' rx='1.5' opacity='.35'/><rect x='10' y='16' width='8' height='8' rx='1.5' opacity='.5'/><rect x='10' y='6' width='8' height='8' rx='1.5' opacity='.65'/><rect x='20' y='6' width='8' height='8' rx='1.5' opacity='.8'/><rect x='30' y='6' width='8' height='8' rx='1.5'/></g><rect x='40' y='6' width='8' height='8' rx='1.5' fill='%23D9822B'/></svg>")}

/* sample websites: videos get a little more presence */
.home figure.card video{box-shadow:0 14px 26px -14px rgba(14,42,54,.35)}

/* CTA band */
.home div.band:not(.cust){background:linear-gradient(120deg,var(--ink-bg),#12394a)}

/* phones: keep everything inside the screen */
@media(max-width:600px){.home .hl{white-space:normal}.illo{min-height:92px}}
@media(min-width:940px){.home .hero-pic{align-self:start;position:sticky;top:24px;padding-top:30px}}

/* ===== v3: fallbacks, colour, sketch icons ===== */
:where(:root){--brand-ink:#0E2A36;--brand-teal:#138A8A;--brand-teal-deep:#0E6F6F;--brand-orange:#D9822B;--brand-bg:#F4F7F7;--brand-grey:#5B6B73;--brand-slate:#2B4350;--surface:#fff;--surface-soft:#EEF4F4;--ink-bg:#0E2A36;--tint-teal:#E3F2F1}
:where(body){font-family:Outfit,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:where(h1,h2,.mono,code){font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
.home{--c-teal:#138A8A;--c-cop:#D9822B;--c-ink:#0E2A36;--t-teal:#E6F4F3;--t-cop:#FBEEDD;--t-ink:#E8EEF1}
[data-theme=dark] .home{--t-teal:rgba(63,193,188,.10);--t-cop:rgba(217,130,43,.12);--t-ink:rgba(255,255,255,.06);--c-teal:#3FC1BC}
/* buttons never colourless */
.home .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;border:1.5px solid var(--brand-ink,#0E2A36);color:var(--brand-ink,#0E2A36);background:transparent;text-decoration:none;font-weight:600}
.home .btn.primary{background:var(--brand-teal,#138A8A);border-color:var(--brand-teal,#138A8A);color:#fff;box-shadow:0 6px 16px -6px rgba(19,138,138,.6)}
.home .btn.primary:hover{background:var(--brand-teal-deep,#0E6F6F)}
/* sketched icons */
.home .sk{width:44px;height:44px;flex:none;color:var(--c-teal);margin-bottom:6px;display:block;overflow:visible}
.home .card.o .sk{color:var(--c-cop)}
.home .card.i .sk{color:var(--c-ink)}
[data-theme=dark] .home .card.i .sk{color:#cfe3e8}
.home .card .sk+h3,.home .tile .sk+*{margin-top:4px}
/* tinted cards with accent bar */
.home .card{background:linear-gradient(180deg,var(--t-teal),var(--surface,#fff) 70%);border-top:3px solid var(--c-teal);position:relative}
.home .card.o{background:linear-gradient(180deg,var(--t-cop),var(--surface,#fff) 70%);border-top-color:var(--c-cop)}
.home .card.i{background:linear-gradient(180deg,var(--t-ink),var(--surface,#fff) 70%);border-top-color:var(--c-ink)}
[data-theme=dark] .home .card{background:var(--t-teal)}[data-theme=dark] .home .card.o{background:var(--t-cop)}[data-theme=dark] .home .card.i{background:var(--t-ink)}
.home .pill{background:var(--t-teal);color:var(--brand-teal-deep,#0E6F6F);border-radius:99px;padding:3px 10px;font-weight:600}
.home .pill.ink{background:var(--brand-ink,#0E2A36);color:#fff}
/* steps */
.home .step{background:var(--t-teal);border-radius:14px;border-left:4px solid var(--c-cop);padding:16px 18px}
.home .step:nth-child(even){border-left-color:var(--c-teal);background:var(--t-cop)}
/* section tints */
.home .section.soft{background:linear-gradient(180deg,var(--t-teal),transparent 85%),var(--surface-soft,#EEF4F4)}
.home .pillars.strip>*{background:var(--t-teal);border-radius:12px}
.home .pillars.strip>*:nth-child(even){background:var(--t-cop)}
.home details{background:var(--t-teal);border-radius:12px;border-left:3px solid var(--c-teal);padding:2px 14px;margin:8px 0}
.home details[open]{background:var(--t-cop);border-left-color:var(--c-cop)}
.home .searchbox{background:linear-gradient(135deg,var(--t-teal),var(--t-cop));border:1px solid rgba(19,138,138,.25);border-radius:16px}
.home .searchbox input{background:var(--surface,#fff);color:var(--brand-ink,#0E2A36);border:1.5px solid rgba(14,42,54,.25);border-radius:10px;padding:11px 12px}
/* doodles */
.home .section{position:relative;overflow:hidden}
.home .doodle{position:absolute;pointer-events:none;opacity:.14;z-index:0}
.home .doodle svg{width:100%;height:auto;display:block}
.home .doodle.castle{right:-30px;bottom:-10px;width:min(460px,60%)}
.home .section>.wrap{position:relative;z-index:1}
[data-theme=dark] .home .doodle{opacity:.2;filter:invert(1) hue-rotate(180deg)}
@media(max-width:700px){.home .doodle.castle{width:80%;opacity:.1}}
.home .step{background:none!important;border:0!important;padding:0!important}

/* ===== v4: line sketches (one weight, ink + one copper accent, kept faint) ===== */
.home .sketch{display:block;width:100%;height:auto;stroke-width:1.6px;overflow:visible}
.home .sketch *{vector-effect:non-scaling-stroke}
.home .sketch .ac{stroke:var(--c-cop,#D9822B)}
.home .doodle.line{opacity:.32;color:var(--brand-ink,#0E2A36);z-index:0}
.home .doodle.line.castle{right:2%;top:14px;bottom:auto;width:230px;opacity:.2}
.home .doodle.line.lighthouse{right:3%;bottom:6px;width:150px}
.home .doodle.line.engine{right:3%;bottom:0;width:230px}
.home .doodle.line.sign{right:3%;bottom:6px;width:230px}
.home .doodle.line.plane{right:6%;top:24px;width:120px;opacity:.4}
.home .hero,.home main>.section:first-child{position:relative;overflow:hidden}
.home .section>.wrap,.home .hero>.wrap{position:relative;z-index:1}
@media(max-width:760px){.home .hide-sm{display:none}.home .doodle.line.castle{width:130px;top:6px;opacity:.14}.home .doodle.line.plane{width:80px;opacity:.25}}
[data-theme=dark] .home .doodle.line{color:#cfe3e8;opacity:.28;filter:none}
[data-theme=dark] .home .doodle.line.castle::after{content:"";position:absolute;left:8%;top:6%;width:26px;height:26px;border-radius:50%;box-shadow:inset -9px 4px 0 0 #cfe3e8;transform:rotate(-20deg)}
[data-theme=dark] .home .lighthouse .beam{opacity:1}
.home .lighthouse .beam{opacity:.7}
/* footer bridge */
.home .foot-sketch{color:#cfe3e8;opacity:.28;max-width:1100px;margin:0 auto 22px;padding:0 16px}
.home .foot-sketch .sketch{width:100%}
.home .site-footer{position:relative}
/* how-it-works trail */
.home .trail{max-width:900px;margin:0 auto 18px;color:var(--brand-ink,#0E2A36);opacity:.9}
[data-theme=dark] .home .trail{color:#cfe3e8}
.home .trail .sketch{--surface:var(--surface,#fff)}
@media(max-width:700px){.home .trail{display:none}}
/* sample spot in corner of the video cards */
.home .card{position:relative}
.home .spot-corner{position:absolute;right:14px;bottom:14px;width:44px;opacity:.55;color:var(--brand-ink,#0E2A36);pointer-events:none}
[data-theme=dark] .home .spot-corner{color:#cfe3e8}
/* hand-drawn underline on prices */
.home .card .price{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='8' viewBox='0 0 90 8'%3E%3Cpath d='M2 5Q12 1 24 4T48 4 70 3 88 5' fill='none' stroke='%23D9822B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/76px 7px;padding-bottom:7px;display:inline-block}
[data-theme=dark] .home::before{filter:invert(1)}
/* 404 */
.home .lost{text-align:center;padding:70px 16px 40px}
.home .lost .sketch{width:230px;margin:0 auto 18px;color:var(--brand-ink,#0E2A36)}
[data-theme=dark] .home .lost .sketch{color:#cfe3e8}
.home .lost .lead{margin:0 auto 22px;max-width:520px;text-align:center}

/* launch: prices not yet set */
.home .price.tbc{font-size:1.15rem;line-height:1.3;font-family:inherit;font-weight:700;color:var(--ink,#0E2A36);opacity:.8}

/* Accessibility: primary buttons need 4.5:1 text contrast in light mode */
:root:not([data-theme="dark"]) .btn.primary,:root:not([data-theme="dark"]) a.primary.btn,:root:not([data-theme="dark"]) button.primary.btn{background:#0b6b6b;color:#fff;border-color:#0b6b6b}
:root:not([data-theme="dark"]) .btn.primary:hover,:root:not([data-theme="dark"]) a.primary.btn:hover{background:#085656;color:#fff}