/* STORY sections (founder 2026-10-07): the Without / With comparison, the
   learning-loop note, the coffee-shop example and the "we cost more" block.
   Same palette and type scale as the rest of the page: ink #19202d, muted
   #53647b, blue #2456d8, lines #dce4ef / #e3e9f2, 18-22px radii. */

.story-compare h2,.story-honest h2{font-size:clamp(36px,4.4vw,62px);font-weight:500;letter-spacing:-.05em;line-height:1.08;color:#19202d;margin:0}
.story-compare h2 span,.story-honest h2 span{color:#667d9e}
.story-compare .eyebrow,.story-honest .eyebrow{font-size:12px;letter-spacing:.1em;color:#48648a;margin:0 0 20px}

/* Hero note: one phrase; on a phone it wraps between the two sentences, never inside them. */
.hero-v2 .hero-trial-note .nw{white-space:nowrap;margin:0}

/* T + O: one comparison. The "With Aitoma" column is a raised blue panel. */
.story-compare{padding-block:96px 90px}
.compare-head{text-align:center;margin-bottom:58px}
.vs{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;max-width:1060px;margin:0 auto}
.vs::before{content:"";position:absolute;z-index:-1;top:-16px;bottom:-16px;left:50%;right:0;border-radius:24px;background:linear-gradient(150deg,#213855,#132338);box-shadow:0 0 0 1px #2b466b,0 34px 70px -34px rgba(19,35,56,.6)}
.vs-row{display:contents}
.vs-a,.vs-b{display:flex;align-items:center;gap:14px;min-height:72px;padding:16px 30px;font-size:19px;line-height:1.38;letter-spacing:-.012em}
.vs-a{background:#fff;color:#6c7a8f;border-left:1px solid #e3e9f2;border-bottom:1px solid #eef2f8}
.vs-b{color:#fff;font-weight:500;border-bottom:1px solid rgba(255,255,255,.09)}
.vs-a::before,.vs-b::before{content:"";flex:none;width:26px;height:26px;border-radius:50%;background-position:center;background-repeat:no-repeat;background-size:12px}
.vs-a::before{background-color:#f6eeee;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c05656' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
.vs-b::before{background-color:#2456d8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.vs-top{min-height:58px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.vs-top::before{display:none}
.vs-a.vs-top{color:#8593a8;border-top:1px solid #e3e9f2;border-radius:20px 0 0 0}
.vs-b.vs-top{gap:10px;border-bottom-color:rgba(255,255,255,.14)}
.vs-b.vs-top img{width:24px;height:24px}
.vs-row:last-child .vs-a{border-radius:0 0 0 20px;border-bottom-color:#e3e9f2}
.vs-row:last-child .vs-b{border-bottom:0}

/* R: the loop note under the three steps */
.story-loop-note{margin:40px auto 0;display:flex;align-items:center;justify-content:center;gap:14px;font-size:19px;line-height:1.5;color:#3c4d66;text-align:left;max-width:900px}
.story-loop-note strong{color:#19202d;font-weight:550}
.story-loop-note .loop-icon{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e6eeff;color:#2456d8}

/* R: the coffee-shop example, three steps left to right */
.story-example{padding-block:24px 96px}
.ex-flow{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:34px;position:relative}
.ex-step{position:relative;background:#fff;border:1px solid #dce4ef;border-radius:20px;padding:24px 24px 26px;box-shadow:0 22px 44px -32px rgba(28,52,110,.35);display:flex;flex-direction:column;gap:16px;min-width:0}
.ex-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-27px;width:20px;height:20px;transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232456d8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat}
.ex-label{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#48648a}
.ex-label span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#2456d8;color:#fff;font-size:13px;letter-spacing:0}
.ex-post{display:flex;gap:18px;align-items:center}
.ex-post img{flex:none;width:108px;height:192px;object-fit:cover;border-radius:14px;box-shadow:0 12px 24px -14px rgba(25,32,45,.5)}
.ex-post strong{display:block;font-size:15px;font-weight:600;color:#48648a;margin-bottom:6px}
.ex-post p{margin:0;font-size:22px;line-height:1.3;font-weight:550;letter-spacing:-.02em;color:#19202d}
.ex-why{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ex-why li{display:flex;align-items:center;gap:12px;font-size:17px;line-height:1.4;color:#2a3446}
.ex-why i{flex:none;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#eef3fd;color:#2456d8}
.ex-chart{display:flex;align-items:flex-end;gap:10px;height:120px;padding:0 4px;border-bottom:1px solid #dce4ef}
.ex-chart i{flex:1;height:var(--h);border-radius:7px 7px 2px 2px;background:#d9e2f0;position:relative}
.ex-chart i.is-win{background:linear-gradient(180deg,#2c62ea,#1e47c7)}
.ex-chart b{position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-size:15px;font-weight:650;color:#2456d8}
.ex-result{margin:0;font-size:17px;line-height:1.45;color:#2a3446}
.ex-result strong{color:#19202d;font-weight:600}

/* Y: "we cost more, here is why", full width */
.story-honest{padding-block:96px 84px;border-top:1px solid #e3e9f2}
.honest-head{display:block}
.honest-head h2{max-width:none}
.honest-head h2 span{display:block}
.honest-head>p{margin:26px 0 0;max-width:none;font-size:21px;line-height:1.6;color:#53647b}
.honest-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:48px;background:#fff;border:1px solid #dce4ef;border-radius:20px}
.honest-strip article{display:flex;align-items:center;gap:18px;padding:24px 26px;min-width:0}
.honest-strip article+article{border-left:1px solid #e8eef6}
.honest-strip h3{margin:0 0 4px;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:#19202d}
.honest-strip p{margin:0;font-size:15.5px;line-height:1.45;color:#53647b}
.hs-tile{flex:none;width:72px;height:72px;border-radius:18px;background:#eef3fd;color:#2456d8;display:grid;place-items:center}
.hs-sources{grid-template-columns:22px 22px;gap:7px;place-content:center}
.hs-sources img{width:22px;height:22px}
.hs-up{display:flex;align-items:flex-end;justify-content:center;gap:6px;padding:16px 14px}
.hs-up i{width:11px;height:var(--h);border-radius:4px 4px 2px 2px;background:#9db6ef}
.hs-up i:last-child{background:#2456d8}
.honest-proof{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:24px 30px;border-radius:18px;background:#eef3fd;border:1px solid #d9e4f7}
.honest-proof strong{display:block;font-size:22px;font-weight:550;letter-spacing:-.02em;color:#19202d}
.honest-proof p{margin:6px 0 0;font-size:16.5px;line-height:1.5;color:#53647b}

@media(max-width:1100px){
.vs-a,.vs-b{font-size:17px;padding:14px 22px}
.ex-flow{gap:26px}
.ex-step:not(:last-child)::after{right:-23px}
.ex-post img{width:88px;height:156px}
.ex-post p{font-size:19px}
.honest-strip article{padding:20px;gap:14px}
.hs-tile{width:60px;height:60px}
}
@media(max-width:760px){
.story-compare{padding-block:56px 60px}
.story-compare .eyebrow,.story-honest .eyebrow{font-size:10px;margin-bottom:16px}
.story-compare h2,.story-honest h2{font-size:clamp(32px,8.6vw,42px)}
.compare-head{margin-bottom:34px}
.vs::before{top:-10px;bottom:-10px;border-radius:18px}
.vs-a,.vs-b{min-height:62px;padding:12px 12px;gap:9px;font-size:14.5px;line-height:1.35}
.vs-a::before,.vs-b::before{width:20px;height:20px;background-size:10px}
.vs-top{min-height:48px;font-size:10px;letter-spacing:.08em}
.vs-a.vs-top{border-radius:16px 0 0 0}
.vs-row:last-child .vs-a{border-radius:0 0 0 16px}
.story-loop-note{font-size:16px;margin-top:28px;align-items:flex-start}
.story-example{padding-block:8px 56px}
.ex-flow{grid-template-columns:1fr;gap:30px}
.ex-step{padding:20px}
.ex-step:not(:last-child)::after{top:auto;bottom:-27px;right:50%;transform:translateX(50%) rotate(90deg)}
.ex-post img{width:84px;height:150px}
.ex-post p{font-size:19px}
.ex-why li,.ex-result{font-size:16px}
.ex-chart{height:96px}
.story-honest{padding-block:56px 50px}
.honest-head>p{font-size:17px;margin-top:18px}
.honest-strip{grid-template-columns:1fr;margin-top:28px}
.honest-strip article{padding:16px 18px}
.honest-strip article+article{border-left:0;border-top:1px solid #e8eef6}
.hs-tile{width:56px;height:56px;border-radius:14px}
.honest-proof{flex-direction:column;align-items:stretch;padding:22px 20px;gap:18px}
}
/* Spanish runs longer (2026-10-13): the honest title keeps two full-width lines on desktop */
@media(min-width:761px){html[lang="es"] .story-honest h2{font-size:clamp(36px,3.9vw,56px)}}