/* Layout: "Coral Tide x Aurora" — a warm shell-white canvas with a drifting colour glow, glass panels on top, and a bento grid of services. Light only, by request. */
:root{
  --bg:#FBF8F5; --ink:#0B1E33; --text:#33475B; --muted:#6A7C8F; --line:rgba(11,30,51,.10);
  --lagoon:#1E6F8C; --blue:#FF5A3C; --lime:#FFB199; --coral:#FF8A6B; --white:#FFFFFF;
  --glass:rgba(255,255,255,.62); --glass-edge:rgba(255,255,255,.95);
  --shadow:0 30px 60px -30px rgba(11,30,51,.28), 0 8px 20px -12px rgba(11,30,51,.12);
  --grad:linear-gradient(100deg, #1E6F8C, #FF5A3C 58%, #FF8A6B);
  --f-display:"Sora", "Inter", system-ui, sans-serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0} img{max-width:100%} [hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--text); font-family:var(--f-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
.wrap{max-width:1200px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display); color:var(--ink); margin:0; line-height:1.04; letter-spacing:-.035em; text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:10px}
.label{font:500 .74rem var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--blue); display:inline-flex; align-items:center; gap:10px}
.label::before{content:""; width:18px; height:2px; border-radius:2px; background:var(--grad)}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

.btn{display:inline-flex; align-items:center; gap:.6em; font:600 .97rem var(--f-body); padding:.95em 1.45em; border-radius:999px; border:1px solid transparent; text-decoration:none; cursor:pointer; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s}
.btn-dark{background:var(--ink); color:#fff; box-shadow:0 12px 24px -12px rgba(11,30,51,.6)}
.btn-dark:hover{transform:translateY(-2px); box-shadow:0 18px 30px -12px rgba(11,30,51,.55)}
.btn-glass{background:var(--glass); border-color:var(--glass-edge); color:var(--ink); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.btn-glass:hover{background:#fff}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}

/* Aurora backdrop */
.aurora{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.aurora span{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; mix-blend-mode:multiply}
.aurora .b1{width:46vw; height:46vw; max-width:620px; max-height:620px; left:38%; top:-14%; background:var(--lagoon); animation:a1 18s ease-in-out infinite alternate}
.aurora .b2{width:40vw; height:40vw; max-width:540px; max-height:540px; left:62%; top:8%; background:var(--blue); animation:a2 22s ease-in-out infinite alternate}
.aurora .b3{width:30vw; height:30vw; max-width:420px; max-height:420px; left:50%; top:42%; background:var(--lime); opacity:.5; animation:a3 16s ease-in-out infinite alternate}
.aurora .b4{width:22vw; height:22vw; max-width:300px; max-height:300px; left:-6%; top:60%; background:var(--lagoon); opacity:.25; animation:a2 20s ease-in-out infinite alternate}
@keyframes a1{to{transform:translate(-8%, 10%) scale(1.12)}}
@keyframes a2{to{transform:translate(10%, -6%) scale(.9)}}
@keyframes a3{to{transform:translate(-14%, -10%) scale(1.15)}}

/* Nav */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--bg)}
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; padding-block:14px}
.nav-in{display:flex; align-items:center; gap:18px; padding:10px 10px 10px 18px; border-radius:999px; background:rgba(255,255,255,.66); border:1px solid var(--glass-edge); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); box-shadow:0 10px 30px -18px rgba(11,30,51,.35)}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font:700 1.15rem var(--f-display); color:var(--ink); letter-spacing:-.03em}
.logo svg{width:30px; height:30px; flex:none}
.links{display:flex; gap:4px; margin-left:auto}
.links a{text-decoration:none; font-weight:500; font-size:.93rem; color:var(--text); padding:.5em .9em; border-radius:999px; transition:background .2s}
.links a:hover{background:rgba(11,30,51,.06)}
.lang{display:flex; padding:3px; border-radius:999px; background:rgba(11,30,51,.06)}
.lang button{font:600 .76rem var(--f-mono); border:0; background:transparent; color:var(--muted); padding:.45em .75em; border-radius:999px; cursor:pointer}
.lang button[aria-pressed="true"]{background:#fff; color:var(--ink); box-shadow:0 2px 8px -2px rgba(11,30,51,.25)}
.nav .btn{padding:.7em 1.15em; font-size:.9rem}
@media (max-width:900px){ .links{display:none} .lang{margin-left:auto} }
@media (max-width:480px){ .nav .btn{display:none} .nav-in{padding-right:10px} }

/* Hero */
.hero{position:relative; padding-block:40px 80px}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(2.9rem, 6.6vw, 5.6rem); font-weight:800; margin-block:22px 24px}
.lede{font-size:clamp(1.05rem, 1.6vw, 1.22rem); color:var(--text); max-width:31em}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.trust{display:flex; flex-wrap:wrap; gap:8px; margin-top:34px}
.trust span{font:500 .78rem var(--f-mono); color:var(--ink); background:rgba(255,255,255,.6); border:1px solid var(--glass-edge); padding:.5em .85em; border-radius:999px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}

/* Launch board */
.board{position:relative; padding:22px; border-radius:30px; background:var(--glass); border:1px solid var(--glass-edge); backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3); box-shadow:var(--shadow); transform:perspective(1200px) rotateY(-6deg) rotateX(3deg); transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.board:hover{transform:perspective(1200px) rotateY(0) rotateX(0)}
.board-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.board-top b{font:600 .95rem var(--f-display); color:var(--ink)}
.board-top small{font:500 .72rem var(--f-mono); color:var(--muted)}
.meter{height:8px; border-radius:99px; background:rgba(11,30,51,.08); overflow:hidden; margin-bottom:18px}
.meter i{display:block; height:100%; width:100%; border-radius:99px; background:var(--grad); transform-origin:left; animation:fill 10s cubic-bezier(.6,0,.2,1) infinite}
@keyframes fill{0%{transform:scaleX(.08)} 12%{transform:scaleX(.24)} 30%{transform:scaleX(.44)} 48%{transform:scaleX(.64)} 66%{transform:scaleX(.84)} 80%,94%{transform:scaleX(1)} 100%{transform:scaleX(.08)}}
.tasks{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.task{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.9); border-radius:16px; padding:12px 14px}
.task .ic{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none}
.task .ic svg{width:18px; height:18px}
.task div{min-width:0}
.task b{display:block; font:600 .9rem var(--f-body); color:var(--ink)}
.task small{display:block; font:500 .72rem var(--f-mono); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.check{margin-left:auto; width:24px; height:24px; border-radius:50%; flex:none; border:2px solid rgba(11,30,51,.15); position:relative; animation:tick 10s infinite}
.check::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--lagoon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; transform:scale(0); animation:pop 10s infinite}
.t1 .check::after{animation-delay:0s} .t2 .check::after{animation-delay:1.8s} .t3 .check::after{animation-delay:3.6s} .t4 .check::after{animation-delay:5.4s} .t5 .check::after{animation-delay:7.2s}
@keyframes pop{0%{transform:scale(0)} 4%{transform:scale(1.2)} 6%,80%{transform:scale(1)} 86%,100%{transform:scale(0)}}
.t2 .check::after{animation-name:pop2} .t3 .check::after{animation-name:pop3} .t4 .check::after{animation-name:pop4} .t5 .check::after{animation-name:pop5}
@keyframes pop2{0%,2%{transform:scale(0)} 6%{transform:scale(1.2)} 8%,62%{transform:scale(1)} 68%,100%{transform:scale(0)}}
@keyframes pop3{0%,2%{transform:scale(0)} 6%{transform:scale(1.2)} 8%,44%{transform:scale(1)} 50%,100%{transform:scale(0)}}
@keyframes pop4{0%,2%{transform:scale(0)} 6%{transform:scale(1.2)} 8%,26%{transform:scale(1)} 32%,100%{transform:scale(0)}}
@keyframes pop5{0%,2%{transform:scale(0)} 6%{transform:scale(1.2)} 8%,10%{transform:scale(1)} 16%,100%{transform:scale(0)}}
.floater{position:absolute; right:-18px; bottom:-26px; padding:12px 16px; border-radius:18px; background:var(--ink); color:#fff; font:600 .85rem var(--f-body); box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; animation:bob 5s ease-in-out infinite alternate}
.floater i{width:10px; height:10px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(255,177,153,.25)}
@keyframes bob{to{transform:translateY(-10px)}}
@media (max-width:920px){ .hero .wrap{grid-template-columns:1fr; gap:48px} .board{transform:none} .floater{right:10px} }

/* Logos strip */
.strip{position:relative; z-index:1; border-block:1px solid var(--line); background:rgba(255,255,255,.55); overflow:hidden}
.strip-track{display:flex; width:max-content; gap:56px; padding-block:20px; animation:marquee 34s linear infinite}
.strip-track span{font:600 1.05rem var(--f-display); color:var(--ink); white-space:nowrap; display:flex; align-items:center; gap:56px; letter-spacing:-.01em}
.strip-track span::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--grad)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Section heads */
section.sec{position:relative; padding-block:110px 0}
.head{display:grid; grid-template-columns:1.1fr .9fr; gap:20px 56px; align-items:end; margin-bottom:48px}
.head h2{font-size:clamp(2.2rem, 4.6vw, 3.6rem); font-weight:700; margin-top:16px}
.head p{font-size:1.08rem; max-width:30em}
@media (max-width:900px){ .head{grid-template-columns:1fr} section.sec{padding-block:80px 0} }

/* Bento */
.bento{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:18px}
.tile{position:relative; grid-column:span 2; background:#fff; border:1px solid var(--line); border-radius:28px; padding:28px; display:flex; flex-direction:column; gap:12px; overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s}
.tile:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.tile::before{content:""; position:absolute; inset:0; background:radial-gradient(320px circle at var(--mx,50%) var(--my,-20%), rgba(255,90,60,.10), transparent 60%); pointer-events:none}
.tile.wide{grid-column:span 3}
.tile h3{font-size:1.45rem; font-weight:700}
.tile p{color:var(--text); font-size:.96rem; max-width:34em}
.tile .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:8px}
.tile .tags span{font:500 .72rem var(--f-mono); color:var(--ink); background:var(--bg); border:1px solid var(--line); padding:.35em .75em; border-radius:999px}
.art{height:170px; border-radius:20px; position:relative; overflow:hidden; margin-bottom:6px}
@media (max-width:1000px){ .bento{grid-template-columns:repeat(2, minmax(0,1fr))} .tile, .tile.wide{grid-column:span 1} .tile.full-sm{grid-column:span 2} }
@media (max-width:620px){ .bento{grid-template-columns:1fr} .tile.full-sm{grid-column:span 1} }

/* Art: branding swatches */
.art-brand{background:linear-gradient(135deg,#E6F1F4,#FFEFE9)}
.sw{position:absolute; width:120px; height:150px; border-radius:16px; box-shadow:0 18px 30px -18px rgba(11,30,51,.5); top:12px; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sw small{position:absolute; left:12px; bottom:10px; font:500 .62rem var(--f-mono); color:rgba(255,255,255,.9)}
.sw.s1{left:calc(50% - 150px); background:var(--ink); transform:rotate(-10deg)}
.sw.s2{left:calc(50% - 60px); background:var(--lagoon); transform:rotate(-2deg); z-index:1}
.sw.s3{left:calc(50% + 30px); background:var(--blue); transform:rotate(8deg); z-index:2}
.sw.s3 small{color:#fff}
.tile:hover .sw.s1{transform:rotate(-16deg) translateX(-14px)}
.tile:hover .sw.s3{transform:rotate(14deg) translateX(14px)}
/* Art: business card */
.art-print{background:linear-gradient(135deg,#FFF5EF,#E6F1F4); perspective:900px; display:grid; place-items:center}
.card3d{width:210px; height:122px; border-radius:14px; background:#fff; box-shadow:0 26px 40px -22px rgba(11,30,51,.55); transform:rotateX(18deg) rotateY(-22deg) rotateZ(4deg); transition:transform .6s cubic-bezier(.2,.8,.2,1); padding:16px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden}
.card3d::after{content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; background:var(--grad); opacity:.9}
.card3d b{font:700 .95rem var(--f-display); color:var(--ink); position:relative; z-index:1}
.card3d span{font:500 .62rem var(--f-mono); color:var(--muted)}
.card3d .back{position:absolute; inset:0; transform:translate(18px,14px); z-index:-1}
.tile:hover .card3d{transform:rotateX(0) rotateY(0) rotateZ(0)}
.stack{position:absolute; width:200px; height:116px; border-radius:14px; background:var(--ink); transform:translate(26px,22px) rotateX(18deg) rotateY(-22deg) rotateZ(10deg); opacity:.95}
/* Art: social phone */
.art-social{background:linear-gradient(135deg,#FFF1EC,#FFEFE9); display:grid; place-items:center}
.phone{width:112px; height:200px; border-radius:22px; background:#fff; border:5px solid var(--ink); position:relative; top:30px; padding:10px 8px; box-shadow:0 20px 30px -18px rgba(11,30,51,.6); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile:hover .phone{transform:translateY(-14px)}
.phone .pf{display:flex; align-items:center; gap:6px; margin-bottom:8px}
.phone .pf i{width:22px; height:22px; border-radius:50%; background:var(--grad)}
.phone .pf s{display:block; height:5px; width:40px; border-radius:4px; background:rgba(11,30,51,.2)}
.phone .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:3px}
.phone .grid b{aspect-ratio:1; border-radius:4px}
/* Art: web */
.art-web{background:linear-gradient(135deg,#FFEFE9,#E6F1F4); display:grid; place-items:center}
.browser{width:82%; border-radius:14px; background:#fff; box-shadow:0 22px 34px -20px rgba(11,30,51,.55); overflow:hidden; transform:translateY(16px); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile:hover .browser{transform:translateY(4px)}
.browser .bar{display:flex; align-items:center; gap:6px; padding:8px 10px; background:var(--bg); border-bottom:1px solid var(--line)}
.browser .bar i{width:7px; height:7px; border-radius:50%; background:rgba(11,30,51,.18)}
.browser .bar span{margin-left:8px; font:500 .64rem var(--f-mono); color:var(--ink); background:#fff; border:1px solid var(--line); padding:2px 8px; border-radius:99px}
.browser .pg{padding:14px; display:grid; gap:7px}
.browser .pg b{height:10px; width:60%; border-radius:6px; background:var(--ink)}
.browser .pg s{height:6px; border-radius:6px; background:rgba(11,30,51,.12)}
.browser .pg u{height:20px; width:38%; border-radius:99px; background:var(--grad); margin-top:4px}
/* Art: start route */
.art-start{background:linear-gradient(135deg,#E6F1F4,#FFF5EF)}
.art-start svg{position:absolute; inset:0; width:100%; height:100%}
.route{stroke-dasharray:6 8; animation:dash 2.5s linear infinite}
@keyframes dash{to{stroke-dashoffset:-28}}

/* Modes */
.modes{position:relative; border-radius:36px; padding:clamp(24px,5vw,56px); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden}
.modes .aurora span{opacity:.22}
.modes-in{position:relative; z-index:1; display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center}
.modes h2{font-size:clamp(2rem, 4vw, 3.1rem); font-weight:700; margin-top:16px}
.modes .intro{margin-top:16px; font-size:1.05rem}
.switch{display:inline-flex; margin-top:28px; padding:5px; border-radius:999px; background:var(--bg); border:1px solid var(--line)}
.switch button{font:600 .95rem var(--f-body); border:0; background:transparent; color:var(--muted); padding:.75em 1.3em; border-radius:999px; cursor:pointer; transition:background .25s, color .25s}
.switch button[aria-pressed="true"]{background:var(--ink); color:#fff}
.panel{display:grid; gap:12px}
.row{display:flex; gap:16px; align-items:flex-start; padding:18px 20px; border-radius:20px; background:var(--bg); border:1px solid var(--line)}
.row .num{flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:#fff; border:1px solid var(--line)}
.row .num svg{width:18px; height:18px}
.row b{display:block; font:600 1rem var(--f-display); color:var(--ink); letter-spacing:-.01em}
.row span{display:block; font-size:.93rem; color:var(--text); margin-top:2px}
@media (max-width:900px){ .modes-in{grid-template-columns:1fr} }

/* Process */
.steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; position:relative}
.steps::before{content:""; position:absolute; left:0; right:0; top:27px; height:2px; background:linear-gradient(90deg, var(--lagoon), var(--blue), var(--lime)); opacity:.5}
.step{position:relative; display:grid; gap:12px; align-content:start}
.step .dot{width:56px; height:56px; border-radius:18px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; font:600 .9rem var(--f-mono); color:var(--blue); box-shadow:0 10px 20px -14px rgba(11,30,51,.5)}
.step h3{font-size:1.25rem; font-weight:600; margin-top:8px}
.step p{font-size:.95rem}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr; row-gap:36px} .steps::before{display:none} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* Pricing note */
.quote{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:stretch}
.quote .big{border-radius:32px; padding:clamp(28px,4vw,44px); background:var(--ink); color:#C9D6E3; position:relative; overflow:hidden}
.quote .big h3{color:#fff; font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:700}
.quote .big p{margin-top:16px; max-width:30em}
.quote .big .glow{position:absolute; right:-120px; top:-120px; width:340px; height:340px; border-radius:50%; background:var(--grad); filter:blur(50px); opacity:.55}
.quote .big .btn{margin-top:28px; background:#fff; color:var(--ink); position:relative}
.quote ul{list-style:none; margin:0; padding:28px; border-radius:32px; background:#fff; border:1px solid var(--line); display:grid; gap:14px; align-content:center}
.quote li{display:flex; gap:12px; align-items:flex-start; font-size:.97rem}
.quote li::before{content:""; flex:none; width:22px; height:22px; margin-top:1px; border-radius:7px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat, var(--grad)}
@media (max-width:900px){ .quote{grid-template-columns:1fr} }

/* Contact */
.contact{position:relative; margin-top:110px; border-radius:40px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}
.contact .aurora span{opacity:.35}
.contact-in{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:clamp(28px,5vw,64px)}
.contact h2{font-size:clamp(2.2rem, 4.6vw, 3.6rem); font-weight:800; margin-top:16px}
.contact .intro{margin-top:16px; font-size:1.05rem; max-width:28em}
.mailbox{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:28px}
.mail{font:500 1rem var(--f-mono); color:var(--ink); background:rgba(255,255,255,.75); border:1px solid var(--glass-edge); padding:.7em 1em; border-radius:14px; user-select:all}
.copy{font:600 .85rem var(--f-body); color:var(--ink); background:transparent; border:1px solid rgba(11,30,51,.2); border-radius:999px; padding:.6em 1.05em; cursor:pointer}
form{display:grid; gap:14px; padding:24px; border-radius:28px; background:rgba(255,255,255,.72); border:1px solid var(--glass-edge); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}
form .two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{display:grid; gap:6px; font:600 .82rem var(--f-body); color:var(--ink)}
input, textarea{font:500 1rem var(--f-body); color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:14px; padding:.85em 1em; width:100%; min-width:0; transition:border-color .2s, box-shadow .2s}
input:focus, textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(255,90,60,.15)}
textarea{min-height:110px; resize:vertical}
fieldset{border:0; padding:0; margin:0; display:grid; gap:8px}
legend{font:600 .82rem var(--f-body); color:var(--ink); margin-bottom:8px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips label{display:inline-flex; cursor:pointer}
.chips input{position:absolute; opacity:0; width:1px; height:1px}
.chips span{font:500 .86rem var(--f-body); padding:.55em .95em; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--text); transition:all .2s}
.chips input:checked + span{background:var(--ink); color:#fff; border-color:var(--ink)}
.chips input:focus-visible + span{outline:3px solid var(--blue); outline-offset:2px}
form .btn{justify-content:center}
.status{font-size:.9rem; color:var(--blue); min-height:1.4em}
@media (max-width:900px){ .contact-in{grid-template-columns:1fr} }
@media (max-width:480px){ form .two{grid-template-columns:1fr} }


/* Entrance: visible at rest, only moves */
.in{animation:in 1s cubic-bezier(.2,.8,.2,1) both}
.in.d1{animation-delay:.08s} .in.d2{animation-delay:.18s} .in.d3{animation-delay:.28s}
@keyframes in{from{transform:translateY(18px)}}
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{animation:none !important; transition:none !important} .check::after{transform:scale(1)} html{scroll-behavior:auto} }

/* ---------- Multi-page additions ---------- */
.links a[aria-current="page"]{background:rgba(11,30,51,.07); color:var(--ink); font-weight:600}
.more{display:inline-flex; align-items:center; gap:8px; margin-top:28px; font:600 .97rem var(--f-body); color:var(--ink); text-decoration:none; border-bottom:2px solid; border-image:var(--grad) 1; padding-bottom:2px}
.more:hover .arr{transform:translateX(4px)}
.more .arr{transition:transform .25s}

/* Page hero */
.page-hero{position:relative; padding-block:56px 64px; overflow:hidden}
.page-hero .aurora, .hero .aurora{-webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent); mask-image:linear-gradient(to bottom, #000 55%, transparent)}
.page-hero .wrap{position:relative; z-index:1; max-width:1200px}
.page-hero h1{font-size:clamp(2.6rem, 5.8vw, 4.6rem); font-weight:800; margin-block:20px 20px; max-width:14em}
.page-hero .lede{max-width:36em}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.crumbs a{font:500 .85rem var(--f-body); text-decoration:none; color:var(--ink); background:rgba(255,255,255,.66); border:1px solid var(--glass-edge); padding:.55em 1em; border-radius:999px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .2s}
.crumbs a:hover{background:#fff}

/* Audience */
.audience{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px}
.aud{background:#fff; border:1px solid var(--line); border-radius:26px; padding:26px; display:grid; gap:10px; align-content:start; transition:transform .3s, box-shadow .3s}
.aud:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.aud .ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:6px}
.aud .ic svg{width:26px; height:26px}
.aud h3{font-size:1.2rem; font-weight:600}
.aud p{font-size:.94rem}
@media (max-width:1000px){ .audience{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:560px){ .audience{grid-template-columns:1fr} }

/* Guide teaser */
.teaser{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; border-radius:36px; padding:clamp(24px,5vw,56px); background:linear-gradient(135deg,#FFEFE9,#E6F1F4); position:relative; overflow:hidden}
.teaser h2{font-size:clamp(2rem, 4vw, 3rem); font-weight:700; margin-top:16px}
.teaser p{margin-top:14px; font-size:1.05rem}
.mini{background:var(--glass); border:1px solid var(--glass-edge); border-radius:26px; padding:20px; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:var(--shadow); display:grid; gap:10px}
.mini div{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.8); border-radius:14px; padding:12px 14px; font:500 .93rem var(--f-body); color:var(--ink)}
.mini i{width:22px; height:22px; border-radius:7px; border:2px solid rgba(11,30,51,.2); flex:none}
.mini i.on{border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat, var(--grad)}
@media (max-width:900px){ .teaser{grid-template-columns:1fr} }

/* FAQ */
.faq{display:grid; gap:12px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:20px; padding:0 22px; transition:box-shadow .3s}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; font:600 1.05rem var(--f-display); color:var(--ink); letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:28px; height:28px; border-radius:50%; background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%230B1E33' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:20px; max-width:46em}
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start}
@media (max-width:900px){ .faq-grid{grid-template-columns:1fr} }

/* CTA band */
.band{position:relative; margin-top:110px; border-radius:40px; overflow:hidden; background:var(--ink); color:#C9D6E3; padding:clamp(32px,6vw,72px); display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center}
.band h2{color:#fff; font-size:clamp(2.2rem, 4.6vw, 3.6rem); font-weight:800}
.band p{margin-top:16px; max-width:32em}
.band .glow{position:absolute; border-radius:50%; filter:blur(60px); opacity:.6}
.band .g1{width:380px; height:380px; right:-80px; top:-140px; background:#FF5A3C}
.band .g2{width:300px; height:300px; right:200px; bottom:-200px; background:#1E6F8C}
.band .acts{position:relative; display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end}
.band .btn-light{background:#fff; color:var(--ink)}
.band .btn-line{border-color:rgba(255,255,255,.35); color:#fff}
@media (max-width:900px){ .band{grid-template-columns:1fr} .band .acts{justify-content:flex-start} }

/* Service detail */
.svc-list{display:grid; gap:28px}
.sd{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:36px; padding:clamp(22px,4vw,48px); scroll-margin-top:110px}
.sd.flip .sd-art{order:2}
.sd-art{border-radius:26px; min-height:320px; position:relative; overflow:hidden; display:grid; place-items:center}
.sd-art .art{position:relative; width:min(340px,90%); height:200px; margin:0; background:none; overflow:visible}
.sd h2{font-size:clamp(1.9rem, 3.6vw, 2.7rem); font-weight:700; margin-top:14px}
.sd .intro{margin-top:14px; font-size:1.04rem}
.gets{list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px}
.gets li{display:flex; gap:10px; font-size:.95rem; align-items:flex-start}
.gets li::before{content:""; flex:none; width:20px; height:20px; margin-top:2px; border-radius:6px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat, var(--grad)}
.ways{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px}
.way{border-radius:18px; padding:16px 18px; background:var(--bg); border:1px solid var(--line)}
.way b{display:block; font:600 .9rem var(--f-display); color:var(--ink)}
.way span{display:block; font-size:.88rem; margin-top:4px}
@media (min-width:901px){ .sd-art .art{transform:scale(1.2)} }
@media (max-width:900px){ .sd{grid-template-columns:1fr} .sd.flip .sd-art{order:0} .sd-art{min-height:240px} }
@media (max-width:520px){ .gets, .ways{grid-template-columns:1fr} }

/* Guide */
.guide{display:grid; grid-template-columns:.75fr 1.25fr; gap:40px; align-items:start}
.gside{position:sticky; top:calc(env(safe-area-inset-top,0px) + 100px); display:grid; gap:16px}
.gcard{background:var(--glass); border:1px solid var(--glass-edge); border-radius:28px; padding:24px; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:var(--shadow)}
.gcard .big{font:800 3.2rem var(--f-display); color:var(--ink); letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1}
.gcard .big small{font:500 1rem var(--f-body); color:var(--muted); letter-spacing:0}
.gcard .meter{margin:16px 0 10px}
.gcard .meter i{animation:none; transform:scaleX(0); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gcard p{font-size:.92rem}
.gcard .reset{margin-top:14px; font:600 .85rem var(--f-body); background:none; border:0; color:var(--muted); cursor:pointer; padding:0; text-decoration:underline}
.phase{margin-bottom:34px}
.phase h2{font-size:1.5rem; font-weight:700; display:flex; align-items:center; gap:12px; margin-bottom:14px}
.phase h2 span{font:500 .75rem var(--f-mono); color:var(--blue); background:#fff; border:1px solid var(--line); padding:.35em .7em; border-radius:999px; letter-spacing:.06em}
.item{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px 20px; margin-bottom:10px; cursor:pointer; transition:border-color .25s, background .25s}
.item:hover{border-color:rgba(255,90,60,.35)}
.item input{appearance:none; -webkit-appearance:none; width:26px; height:26px; border-radius:8px; border:2px solid rgba(11,30,51,.22); margin:2px 0 0; cursor:pointer; background:#fff; transition:all .2s}
.item input:checked{border-color:transparent; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat, var(--grad)}
.item input:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.item b{display:block; font:600 1.02rem var(--f-display); color:var(--ink); letter-spacing:-.01em}
.item p{font-size:.93rem; margin-top:4px}
.item .help{display:inline-block; margin-top:8px; font:500 .7rem var(--f-mono); color:#1E6F8C; background:#E4F0F4; padding:.3em .7em; border-radius:999px}
.item:has(input:checked){background:#FFFCFA}
.item:has(input:checked) b{text-decoration:line-through; text-decoration-color:rgba(255,90,60,.6)}
@media (max-width:900px){ .guide{grid-template-columns:1fr} .gside{position:static} }

/* Values */
.values{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.val{background:#fff; border:1px solid var(--line); border-radius:26px; padding:26px; display:grid; gap:10px; align-content:start}
.val .k{font:800 2.2rem var(--f-display); letter-spacing:-.04em; line-height:1}
.val h3{font-size:1.15rem; font-weight:600}
.val p{font-size:.94rem}
@media (max-width:900px){ .values{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .values{grid-template-columns:1fr} }
.phases{display:grid; gap:14px}
.ph{display:grid; grid-template-columns:120px 1fr 1fr; gap:24px; background:#fff; border:1px solid var(--line); border-radius:26px; padding:26px 28px; align-items:start}
.ph .n{font:800 2.6rem var(--f-display); letter-spacing:-.04em; line-height:1}
.ph h3{font-size:1.3rem; font-weight:700}
.ph .who{font:500 .72rem var(--f-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:6px}
.ph .col p{font-size:.95rem}
@media (max-width:820px){ .ph{grid-template-columns:1fr; gap:12px} }

/* Contact page */
.after{display:grid; gap:12px; margin-top:28px}
.after div{display:flex; gap:14px; align-items:flex-start; background:rgba(255,255,255,.7); border:1px solid var(--glass-edge); border-radius:18px; padding:14px 16px}
.after b{font:600 .95rem var(--f-display); color:var(--ink)}
.after span.n{flex:none; width:30px; height:30px; border-radius:10px; background:var(--grad); color:#fff; display:grid; place-items:center; font:600 .8rem var(--f-mono)}
.after p{font-size:.9rem}

/* Footer */
footer{margin-top:110px; border-top:1px solid var(--line); background:rgba(255,255,255,.5)}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-block:56px 32px}
.foot p{font-size:.93rem; margin-top:14px; max-width:24em}
.foot h4{font:500 .74rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:6px 0 14px}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.foot a{text-decoration:none; font-size:.93rem; color:var(--ink)}
.foot a:hover{color:var(--blue)}
.foot-bottom{display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; padding-block:20px 36px; border-top:1px solid var(--line); font:500 .76rem var(--f-mono); color:var(--muted)}
@media (max-width:900px){ .foot{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot{grid-template-columns:1fr} }

/* Tally form card */
.tally-card{border-radius:28px; padding:24px; background:rgba(255,255,255,.78); border:1px solid var(--glass-edge); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); display:grid; gap:14px; align-content:start; position:relative; z-index:1}
.tally-card h3{font-size:1.5rem; font-weight:700}
.tally-card iframe{width:100%; min-height:820px; border:0; background:transparent}
.tally-card .btn{justify-content:center}
.tally-card .alt{font-size:.88rem; color:var(--muted)}

/* ---------- Realistic example mockups (fictional client: Korrel & Co bakery) ---------- */
.mockwrap{container-type:inline-size; display:grid; place-items:center; padding:clamp(14px,3vw,28px); min-height:0 !important}
.mockwrap.sd-art{background:linear-gradient(135deg,#FFF3E6,#F3E7DA)}
.mk{font-size:calc(100cqw / 44); width:40em; max-width:100%; position:relative; font-family:var(--f-body); color:#2B1A10; line-height:1.35}
.mk *{box-sizing:border-box}
.mk .ex{position:absolute; top:-.4em; right:0; z-index:5; font:500 .78em var(--f-mono); letter-spacing:.06em; text-transform:uppercase; background:#0B1E33; color:#fff; padding:.35em .8em; border-radius:99em}
.mk .serif{font-family:"Fraunces", Georgia, "Times New Roman", serif}
.bake-logo{display:inline-flex; align-items:center; gap:.45em; font-family:"Fraunces", Georgia, serif; font-weight:700; letter-spacing:-.01em}
.bake-logo svg{width:1.3em; height:1.3em}

/* Brand sheet */
.mk-brand .sheet{background:#fff; border-radius:1.2em; box-shadow:0 1.6em 3em -1.6em rgba(43,26,16,.45); padding:2em; display:grid; gap:1.4em}
.mk-brand .hd{display:flex; align-items:center; justify-content:space-between; gap:1em}
.mk-brand .bake-logo{font-size:2.3em; color:#5B2E16}
.mk-brand .tag{font:500 .8em var(--f-mono); color:#8A6A55; text-transform:uppercase; letter-spacing:.1em}
.mk-brand .swatches{display:grid; grid-template-columns:repeat(4,1fr); gap:.6em}
.mk-brand .swatches div{border-radius:.7em; padding:2.6em .6em .5em; font:500 .72em var(--f-mono); color:#fff}
.mk-brand .ty{display:grid; grid-template-columns:1fr 1fr; gap:.8em}
.mk-brand .ty div{border:1px solid #EFE4D8; border-radius:.8em; padding:.8em 1em}
.mk-brand .ty b{display:block; font-size:2.4em; line-height:1; color:#5B2E16}
.mk-brand .ty span{font-size:.8em; color:#8A6A55}
.mk-brand .pat{height:2.2em; border-radius:.6em; background:repeating-linear-gradient(135deg,#E9C46A 0 .6em,#F6DFA0 .6em 1.2em)}

/* Print */
.mk-print{height:27em}
.mk-print .flyer{position:absolute; left:2em; top:1.5em; width:17em; height:24em; background:#FFF4E0; border-radius:.5em; box-shadow:0 1.4em 2.6em -1.4em rgba(43,26,16,.5); transform:rotate(-6deg); padding:1.6em; display:flex; flex-direction:column; gap:.7em; overflow:hidden}
.mk-print .flyer .bake-logo{font-size:1.15em; color:#5B2E16}
.mk-print .flyer h4{margin:.4em 0 0; font:700 2.2em/1 "Fraunces", Georgia, serif; color:#5B2E16; letter-spacing:-.02em}
.mk-print .flyer p{font-size:.92em; color:#6B4A36}
.mk-print .flyer .when{margin-top:auto; background:#8A4B2A; color:#FFF4E0; border-radius:.5em; padding:.7em .9em; font-weight:600; font-size:.95em}
.mk-print .flyer svg.loaf{position:absolute; right:-1.4em; top:8.8em; width:9em; opacity:.95}
.mk-print .card{position:absolute; width:19em; height:11em; border-radius:.6em; box-shadow:0 1.4em 2.4em -1.2em rgba(43,26,16,.55); padding:1.3em 1.4em; display:flex; flex-direction:column; justify-content:space-between}
.mk-print .card.front{right:1em; top:2.2em; background:#5B2E16; color:#FFF4E0; transform:rotate(4deg); align-items:center; justify-content:center}
.mk-print .card.front .bake-logo{font-size:1.9em; color:#FFF4E0}
.mk-print .card.back{right:3.4em; top:13.6em; background:#FFF4E0; transform:rotate(-2deg)}
.mk-print .card.back b{font:700 1.25em "Fraunces", Georgia, serif; color:#5B2E16}
.mk-print .card.back span{display:block; font-size:.82em; color:#6B4A36}
.mk-print .card.back .ln{font:500 .78em var(--f-mono); color:#5B2E16; line-height:1.6}

/* Website */
.mk-web .win{background:#fff; border-radius:1em; box-shadow:0 1.6em 3em -1.6em rgba(43,26,16,.5); overflow:hidden}
.mk-web .bar{display:flex; align-items:center; gap:.4em; padding:.7em .9em; background:#F4EEE8}
.mk-web .bar i{width:.65em; height:.65em; border-radius:50%; background:#D9CFC5}
.mk-web .bar span{margin-left:.8em; font:500 .78em var(--f-mono); background:#fff; border-radius:99em; padding:.25em .9em; color:#5B2E16}
.mk-web nav{display:flex; align-items:center; justify-content:space-between; padding:.9em 1.4em; border-bottom:1px solid #F1E8DE}
.mk-web nav .bake-logo{font-size:1.15em; color:#5B2E16}
.mk-web nav div{display:flex; gap:1.1em; font-size:.82em; color:#6B4A36}
.mk-web .whero{display:grid; grid-template-columns:1.2fr .8fr; gap:1em; align-items:center; padding:1.6em 1.4em; background:#FFF4E0}
.mk-web .whero h4{margin:0; font:700 2.1em/1.02 "Fraunces", Georgia, serif; color:#5B2E16; letter-spacing:-.02em}
.mk-web .whero p{font-size:.86em; color:#6B4A36; margin:.6em 0 .9em}
.mk-web .whero .b{display:inline-block; background:#8A4B2A; color:#fff; font-weight:600; font-size:.82em; padding:.6em 1em; border-radius:99em}
.mk-web .whero svg{width:100%}
.mk-web .prod{display:grid; grid-template-columns:repeat(3,1fr); gap:.7em; padding:1.1em 1.4em 1.4em}
.mk-web .prod div{border:1px solid #F1E8DE; border-radius:.7em; padding:.6em; font-size:.8em}
.mk-web .prod i{display:block; height:3.4em; border-radius:.5em; margin-bottom:.5em}
.mk-web .prod b{display:block; color:#5B2E16}
.mk-web .prod span{color:#8A6A55}
.mk-web .wmail{position:absolute; left:-.6em; bottom:-1.2em; background:#0B1E33; color:#fff; border-radius:.9em; padding:.7em 1em; font-size:.85em; box-shadow:0 1em 2em -1em rgba(0,0,0,.5); display:flex; gap:.6em; align-items:center}
.mk-web .wmail b{font-family:var(--f-mono); font-weight:500}

/* Social */
.mk-social{display:grid; place-items:center}
.mk-social .handset{width:24em; background:#fff; border:.55em solid #1B1B1F; border-radius:2.4em; padding:1.2em 1em 1em; box-shadow:0 1.6em 3em -1.4em rgba(0,0,0,.5)}
.mk-social .ptop{display:flex; justify-content:space-between; font-weight:700; font-size:.95em; margin-bottom:.9em}
.mk-social .pf{display:flex; align-items:center; gap:1em}
.mk-social .av{width:4.6em; height:4.6em; border-radius:50%; background:#FFF4E0; border:.2em solid #E9C46A; display:grid; place-items:center}
.mk-social .av svg{width:2.6em}
.mk-social .st{display:flex; gap:1.2em; font-size:.8em; text-align:center}
.mk-social .st b{display:block; font-size:1.15em}
.mk-social .bio{font-size:.82em; margin:.7em 0 .8em}
.mk-social .bio b{display:block}
.mk-social .btns{display:grid; grid-template-columns:1fr 1fr; gap:.4em; margin-bottom:.8em}
.mk-social .btns span{background:#EFEFF2; border-radius:.5em; text-align:center; font-size:.78em; font-weight:600; padding:.45em}
.mk-social .pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:.2em}
.mk-social .pgrid div{aspect-ratio:1; display:grid; place-items:center; text-align:center; padding:.4em; font:700 .78em/1.05 "Fraunces", Georgia, serif; overflow:hidden; position:relative}
.mk-social .pgrid svg{width:70%}

/* Start / chat */
.mk-start .chat{background:#fff; border-radius:1.2em; box-shadow:0 1.6em 3em -1.6em rgba(11,30,51,.45); overflow:hidden}
.mk-start .chd{display:flex; align-items:center; gap:.8em; padding:.9em 1.1em; border-bottom:1px solid #EEF0F3}
.mk-start .chd i{width:2.6em; height:2.6em; border-radius:50%; background:#0B1E33; display:grid; place-items:center}
.mk-start .chd i svg{width:1.8em}
.mk-start .chd b{display:block; font-size:.95em; color:#0B1E33}
.mk-start .chd span{font-size:.75em; color:#2AA05A}
.mk-start .msgs{display:grid; gap:.6em; padding:1.1em; background:#EEF3F7}
.mk-start .m{max-width:80%; padding:.6em .85em; border-radius:1em; font-size:.86em; color:#0B1E33; box-shadow:0 .1em .2em rgba(0,0,0,.06)}
.mk-start .m small{display:block; text-align:right; font-size:.72em; color:#7A8794; margin-top:.2em}
.mk-start .them{background:#fff; border-bottom-left-radius:.3em}
.mk-start .us{background:#DDF3E4; justify-self:end; border-bottom-right-radius:.3em}
.mk-start .splan{background:#fff; border-radius:.8em; padding:.7em .9em; font-size:.82em; display:grid; gap:.35em; justify-self:end; width:80%; border:1px solid #DCE6EE}
.mk-start .splan b{color:#0B1E33}
.mk-start .splan span{display:flex; gap:.5em; align-items:center}
.mk-start .splan span::before{content:""; width:1em; height:1em; border-radius:.3em; border:.15em solid #C6D2DC; flex:none}
.mk-start .splan span.ok::before{background:#2AA05A; border-color:#2AA05A}

/* Bento tiles that hold a mockup */
.art.mockwrap{height:auto; border-radius:20px; margin-bottom:6px; background:linear-gradient(135deg,#FFF3E6,#F3E7DA); overflow:visible}
.tile .art.mockwrap{padding:18px}