/* C. Neo-Brutalist Pop: thick outlines, hard shadows, stickers. Colours come from theme.css (the logo's palette). */
@import url('/theme.css');
:root{color-scheme:light;--bg:var(--background);--ink:var(--text);--card:#fff;--pink:var(--tint-orange);--blue:var(--primary);--yellow:var(--accent);--lime:var(--tint-teal);--mute:var(--brand-slate);--sh:6px 6px 0 var(--ink);--font:"Arial Black","Helvetica Neue",Arial,sans-serif;--body:system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);background-image:radial-gradient(var(--ink) 1.2px,transparent 1.2px);background-size:22px 22px;background-position:0 0;color:var(--ink);font:18px/1.55 var(--body);overflow-x:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;z-index:20}.skip:focus{left:8px}
a{color:var(--blue);font-weight:700}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid var(--blue);outline-offset:3px}
.concept a{color:var(--ink)}
.concept{background:var(--lime);border-bottom:3px solid var(--ink);font-size:14px;font-weight:700;text-align:center;padding:8px 16px}
.top{max-width:1100px;margin:0 auto;padding:18px 20px}
.logo{display:inline-block;font:900 20px var(--font);color:var(--ink);text-decoration:none;background:var(--yellow);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:6px 14px;transform:rotate(-1.5deg)}
main{max-width:1100px;margin:0 auto;padding:0 20px 48px}
.hero{position:relative;padding:clamp(40px,8vw,90px) 0 30px}
h1{font:900 clamp(46px,10vw,120px)/.95 var(--font);text-transform:uppercase;letter-spacing:-.03em;margin:0 0 20px}
h1 mark{background:var(--pink);color:var(--ink);padding:0 .12em;border:4px solid var(--ink);box-shadow:var(--sh);display:inline-block;transform:rotate(-2deg)}
.lead{font-size:clamp(19px,2.4vw,25px);font-weight:700;max-width:26em;margin:0 0 30px}
.sticker{display:inline-block;margin:0 14px 18px 0;font:900 15px var(--font);text-transform:uppercase;padding:10px 16px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);animation:wob 4s ease-in-out infinite alternate}
.s1{background:var(--blue);color:#fff;transform:rotate(-3deg)}
.s2{background:var(--lime);transform:rotate(3deg);animation-delay:-2s}
@keyframes wob{to{transform:rotate(-3deg) translateY(-6px)}}
.boxed{background:var(--card);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:18px;max-width:780px}
.search{display:flex;gap:12px;flex-wrap:wrap}
input,select{width:100%;font:inherit;font-weight:700;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:0;padding:12px 14px;min-height:54px}
input::placeholder{color:#5a5a5a;font-weight:600}
.search input{flex:1 1 200px;min-width:0;width:auto;font-size:22px}
.btn{display:inline-block;font:900 17px var(--font);text-transform:uppercase;border:3px solid var(--ink);padding:13px 24px;min-height:54px;cursor:pointer;text-decoration:none;background:#fff;color:var(--ink);box-shadow:var(--sh);transition:transform .1s,box-shadow .1s}
.btn.primary{background:var(--yellow)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.btn:disabled{opacity:.6;cursor:wait}
.msg{background:#fff;border:3px solid var(--ink);padding:10px 14px;margin:14px 0;font-weight:700}
.msg.err{background:var(--tint-red)}
.results{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px;max-width:780px}
.results li{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:var(--card);border:3px solid var(--ink);box-shadow:var(--sh);padding:14px 18px;animation:pop .35s both}
.results li:nth-child(odd){transform:rotate(-.4deg)}.results li:nth-child(even){transform:rotate(.4deg)}
.results li:nth-child(2){animation-delay:.05s}.results li:nth-child(3){animation-delay:.1s}.results li:nth-child(4){animation-delay:.15s}.results li:nth-child(5){animation-delay:.2s}
@keyframes pop{from{opacity:0;transform:scale(.92)}}
.dom{font:900 clamp(20px,3vw,28px) var(--font);word-break:break-all}
.price{font-weight:800;margin-right:10px}
.tag{font-weight:800;padding:3px 12px;border:3px solid var(--ink);background:var(--bg)}
section{padding:36px 0}
h2{font:900 clamp(30px,5vw,52px)/1 var(--font);text-transform:uppercase;letter-spacing:-.02em;margin:0 0 20px}
.steps{list-style:none;counter-reset:s;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding:0;margin:0}
.steps li{counter-increment:s;background:var(--card);border:3px solid var(--ink);box-shadow:var(--sh);padding:20px}
.steps li:nth-child(1){background:var(--lime)}.steps li:nth-child(2){background:var(--pink)}.steps li:nth-child(3){background:var(--yellow)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:46px;height:46px;background:var(--ink);color:#fff;font:900 24px var(--font);margin-bottom:10px}
.steps strong{display:block;font:900 20px var(--font);text-transform:uppercase}.steps span{font-weight:600}
#checkout{background:var(--card);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:clamp(18px,4vw,36px)}
.summary{background:var(--lime);border:3px solid var(--ink);padding:12px 16px;font:900 20px var(--font);margin-bottom:16px}
.fields{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
label,legend{font:900 14px var(--font);text-transform:uppercase;display:block;margin-bottom:5px}
fieldset{border:3px solid var(--ink);padding:12px 16px;margin:16px 0}
.check{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-weight:600;font-size:16px;text-transform:none}
.check input{width:24px;height:24px;min-height:0;flex:none;accent-color:var(--blue)}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.todo{background:var(--yellow);border:2px solid var(--ink);padding:0 8px;font-size:13px;font-style:normal;font-weight:800}
footer{max-width:1100px;margin:0 auto;padding:26px 20px 60px;border-top:4px solid var(--ink);font-weight:600;font-size:15px}
footer ul{list-style:none;display:flex;gap:8px 20px;flex-wrap:wrap;padding:0;margin:0 0 12px}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---- shared by every page (legal, success, admin) ---- */
:root{--soft:var(--background);--flag:var(--accent);--flag-ink:var(--text);--line:var(--text);--acc:var(--primary);--acc-ink:#fff}
.prose,main.wide{max-width:780px;background:var(--card);border:4px solid var(--ink);box-shadow:var(--sh);padding:clamp(18px,4vw,40px);margin:24px auto 48px}
main.wide{max-width:1100px}
.prose h1,main.wide h1{font-size:clamp(34px,6vw,56px);margin-bottom:14px}
.prose h2,main.wide h2{font-size:clamp(20px,3vw,28px);margin:28px 0 10px}
.prose p,.prose li{max-width:42em}
table{width:100%;border-collapse:collapse;font-size:16px;margin:10px 0;background:var(--card)}
th,td{text-align:left;padding:8px 10px;border:2px solid var(--ink);vertical-align:top}
th{background:var(--yellow);font-weight:800}
.d{color:var(--mute);font-size:14px;font-weight:600}
.row{display:flex;gap:10px;align-items:center;margin:6px 0;flex-wrap:wrap}.row input{width:auto}
.tablewrap{overflow-x:auto}
td,th{font-size:14px}
.pill{padding:2px 10px;border:2px solid var(--ink);background:var(--bg);font-weight:800;font-size:13px}
.pill.registered{background:var(--lime)}.pill.needs_attention{background:var(--pink)}

/* ---- domains + hosting + web design rebrand ---- */
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{border:3px solid var(--ink);box-shadow:var(--sh);padding:20px;background:var(--card)}
.card.c1{background:var(--lime)}.card.c2{background:var(--pink)}.card.c3{background:var(--yellow)}
.card h3{font:900 24px var(--font);text-transform:uppercase;margin:0 0 8px}
.card p{margin:0;font-weight:600}
.panel{background:var(--card);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:clamp(18px,4vw,36px)}
textarea{width:100%;font:inherit;font-weight:600;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:0;padding:12px 14px;resize:vertical}
textarea:focus-visible{outline:4px solid var(--blue);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.navlist{list-style:none;display:flex;gap:12px;align-items:center;margin:0;padding:0}
td select,td input{min-height:40px;padding:6px 8px;font-size:14px}

/* ---- tamar.digital logo: sits on a plate that uses the logo's own off-white, so no box shows ---- */
.logo{background:var(--background);padding:8px 18px;transform:rotate(-1deg);line-height:0}
.logo img{display:block;height:48px;width:auto}
@media(min-width:760px){.logo img{height:60px}}

/* years picker beside the search box */
.search select{flex:1 1 130px;width:auto;min-width:0;font-weight:700}

/* ---- phones: no tap delay, no surprise text zoom, room for the home bar on notched phones ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,input,select,textarea,summary,label{touch-action:manipulation}
footer{padding-bottom:max(60px,calc(env(safe-area-inset-bottom) + 24px))}