/* Klar — white canvas, black text, lime accent. Nothing else. */
:root{
  --lime:#c8ff00; --lime-soft:#e0f870; --lime-pale:#f0fbb0; --lime-deep:#3a5a00;
  --ink:#1a1a1a; --canvas:#fff; --soft:#f6f6f4;
  --body:rgba(26,26,26,.72); --mute:rgba(26,26,26,.52);
  --hair:rgba(26,26,26,.13);
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --gutter:clamp(20px,5vw,72px); --r:26px; --pill:9999px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:940px}
h1,h2,h3{margin:0;letter-spacing:-.032em;font-weight:900;color:var(--ink)}
p{color:var(--body)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 28px;border-radius:var(--pill);font-weight:600;font-size:15.5px;text-decoration:none;transition:.16s;border:0;cursor:pointer;line-height:1}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:var(--lime-soft)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-line{border:1px solid var(--hair);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--soft)}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--mute)}

/* ribbon + nav

   The black band reads as a clipped video edge unless it is unmistakably a
   BANNER, so it is taller than a ribbon and it carries more than one message.
   The messages are stacked in one grid cell and cross-faded: 30s a cycle, 10s
   each, which is slow enough to be read twice before it moves. Adding a fourth
   message is one more .msg, one more nth-child delay, and the cycle length and
   the keyframe percentages scaled so each message keeps its 10s. */
.ribbon{background:var(--ink);color:#fff;font-size:14.5px;font-weight:600}
.ribbon .wrap{display:grid;padding:16px var(--gutter);text-align:center}
.ribbon .msg{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  opacity:0;animation:ribbonCycle 30s linear infinite}
.ribbon .msg:nth-child(2){animation-delay:10s}
.ribbon .msg:nth-child(3){animation-delay:20s}
.ribbon em{font-style:normal;color:rgba(255,255,255,.6);font-weight:500}
.ribbon b{color:var(--lime);font-weight:700}
@keyframes ribbonCycle{0%{opacity:0}1.3%{opacity:1}30.7%{opacity:1}33.3%{opacity:0}100%{opacity:0}}
/* Someone who has asked the OS to stop animation gets all of them at once,
   stacked. The banner carries the whole price now, so holding only the first
   message would hide what the thing costs. */
@media(prefers-reduced-motion:reduce){
  .ribbon .wrap{gap:6px}
  .ribbon .msg{grid-area:auto;animation:none;opacity:1}
}
nav{background:var(--canvas);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:50}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.brand img{height:26px;width:auto}
.brand-foot img{height:25px;width:auto}
.navlinks{display:flex;align-items:center;gap:28px;font-size:15.5px;font-weight:500}
.navlinks a{text-decoration:none;color:var(--body)}
.navlinks a:hover{color:var(--ink)}
.navlinks a.btn{color:var(--ink)}

/* Language: an icon, not two words. "Suomeksi" / "In English" was already the
   widest thing in the nav at two languages and would not survive a third.
   <details> rather than a hover menu, because hover does not exist on a phone
   and this way the whole control needs no JavaScript. */
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--pill);color:var(--body);transition:.16s}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover,.lang[open] summary{color:var(--ink);background:var(--soft)}
.lang summary svg{width:19px;height:19px;display:block}
.lang .langmenu{position:absolute;right:0;top:calc(100% + 10px);background:var(--canvas);
  border:1px solid var(--hair);border-radius:12px;padding:6px;min-width:154px;
  display:flex;flex-direction:column;gap:2px;box-shadow:0 14px 34px rgba(26,26,26,.14);z-index:60}
.lang .langmenu a{padding:9px 12px;border-radius:8px;font-size:15px;white-space:nowrap;color:var(--body)}
.lang .langmenu a:hover{background:var(--soft);color:var(--ink)}
.lang .langmenu a.on{font-weight:700;color:var(--ink)}
/* Inside the collapsed nav panel there is no room for a popup, so the icon
   grows its label back and the two languages become two more rows. */
@media(max-width:1000px){
  .lang{width:100%}
  .lang summary{width:auto;justify-content:flex-start;gap:10px;padding:15px 2px;border-radius:0;
    border-bottom:1px solid var(--hair);font-size:17px}
  .lang summary::after{content:attr(data-label)}
  .lang .langmenu{position:static;border:0;box-shadow:none;background:transparent;padding:0 0 0 29px}
  .lang .langmenu a{border-bottom:1px solid var(--hair);border-radius:0;padding:13px 2px;font-size:16px}
}

/* page head */
.pagehead{padding:clamp(48px,7vw,96px) 0 clamp(28px,4vw,48px)}
.pagehead h1{font-size:clamp(38px,6vw,84px);line-height:1;margin-top:18px;max-width:15ch}
.pagehead h1 mark{background:var(--lime);color:var(--ink);padding:0 .12em;border-radius:6px}
.pagehead .sub{margin-top:22px;max-width:42ch;font-size:clamp(17px,1.7vw,22px);font-weight:500;color:var(--body);line-height:1.34}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;align-items:center}
.cta-note{font-size:14.5px;color:var(--mute)}

section{padding:clamp(56px,8vw,112px) 0}
section.tight{padding-top:0}
h2{font-size:clamp(30px,5vw,60px);line-height:1.02;margin-top:16px;max-width:18ch}
.subtitle{margin-top:16px;max-width:46ch;font-size:clamp(16.5px,1.6vw,20px);font-weight:500;color:var(--body);line-height:1.35}

/* images */
.portrait{aspect-ratio:2/3;border-radius:var(--r);overflow:hidden;background:var(--soft)}
.portrait img,.portrait video{width:100%;height:100%;object-fit:cover;display:block}

/* open rows, hairlines, no boxes */
.rowgrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)}
.cell{padding:30px 30px 30px 0}
.cell+.cell{border-left:1px solid var(--hair);padding-left:30px}
.cell .n{font-size:clamp(27px,3.4vw,44px);font-weight:900;letter-spacing:-.045em;line-height:1.02}
.cell .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--mute)}
.cell h3{font-size:20px;letter-spacing:-.028em}
.cell p{margin:8px 0 0;font-size:15.5px;font-weight:500}

/* service tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(40px,5vw,66px)}
.tile .frame{border-radius:20px;background:var(--soft);aspect-ratio:1/1;display:grid;place-items:center;padding:18px;overflow:hidden}
.tile h3{font-size:19px;margin-top:15px}
.tile p{margin:4px 0 0;font-size:15px;font-weight:500;color:var(--mute)}

/* lime band */
.meshband{background:var(--canvas);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
form{display:flex;gap:12px;margin-top:26px;max-width:560px;flex-wrap:wrap}
input{flex:1;min-width:240px;padding:15px 20px;border:1px solid var(--hair);border-radius:var(--pill);font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.fine{font-size:14px;font-weight:500;color:var(--mute);margin-top:14px}

/* footer */
footer{border-top:1px solid var(--hair);margin-top:clamp(40px,6vw,80px)}
.foot-top{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding:clamp(40px,5vw,64px) 0}
.foot-top h2{font-size:clamp(26px,3.4vw,44px);max-width:16ch;margin:0}
.foot-top .side{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.foot-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;padding:clamp(30px,3.6vw,46px) 0;border-top:1px solid var(--hair)}
.foot-cols h4{margin:0 0 14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--mute)}
.foot-cols a{display:block;margin-bottom:9px;text-decoration:none;color:var(--body);font-size:15.5px}
.foot-cols a:hover{color:var(--ink)}
.foot-cols .lede{font-size:15.5px;color:var(--body);max-width:32ch;margin:14px 0 0}
.foot-bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 0 40px;border-top:1px solid var(--hair);font-size:14px;color:var(--mute)}
.foot-bar .legal{display:flex;gap:20px;flex-wrap:wrap}
.foot-bar a{text-decoration:none;color:var(--mute)}
.foot-bar a:hover{color:var(--ink)}
@media(max-width:860px){.foot-top,.foot-cols{grid-template-columns:1fr}}

/* lattice mesh — sits behind the content, middle only */
.mesh-canvas{position:absolute!important;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
[data-mesh]>.wrap{position:relative;z-index:1}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px}
.modal.is-open{display:grid}
.modal .veil{position:absolute;inset:0;background:rgba(10,10,10,.68);backdrop-filter:blur(3px)}
.modal .box{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:var(--r);padding:clamp(26px,4vw,44px)}
.modal .x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:var(--pill);border:0;background:var(--soft);font-size:19px;line-height:1;cursor:pointer;color:var(--ink)}
.modal h3{font-size:clamp(25px,3.2vw,36px);line-height:1.05;max-width:16ch}
.modal .tag{display:inline-block;background:var(--lime);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 13px;border-radius:var(--pill);margin-bottom:16px}
.modal ul{list-style:none;margin:22px 0 0;padding:0}
.modal li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--hair);font-size:16.5px;font-weight:500}
.modal li:before{content:"";flex:0 0 9px;height:9px;margin-top:8px;border-radius:50%;background:var(--lime)}
.modal form{max-width:none}
.modal input{flex:1 1 100%;background:var(--soft)}

@media(max-width:1000px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .rowgrid{grid-template-columns:1fr 1fr}
  .cell+.cell{border-left:0;padding-left:0}
  .cell{border-top:1px solid var(--hair);padding-right:0}
}
/* ---- mobile ---- */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--pill);border:1px solid var(--hair);background:transparent;cursor:pointer;padding:0}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.nav-toggle span:before,.nav-toggle span:after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
.nav-toggle span:before{top:-6px}.nav-toggle span:after{top:6px}

@media(max-width:860px){
  :root{--gutter:18px;--r:20px}
  nav .wrap{height:64px}
  .brand img{height:22px}
  .nav-toggle{display:inline-flex}
  nav .wrap{position:relative}
  .navlinks{position:absolute;top:100%;left:0;right:0;background:var(--canvas);border-bottom:1px solid var(--hair);
            box-shadow:0 14px 28px rgba(26,26,26,.09);
            flex-direction:column;align-items:stretch;gap:0;padding:8px 18px 18px;display:none;z-index:60}
  .navlinks.open{display:flex}
  .navlinks a{padding:15px 2px;font-size:17px;border-bottom:1px solid var(--hair)}
  .navlinks a.btn{margin-top:14px;justify-content:center;border-bottom:0;padding:16px 24px}
  .ribbon{font-size:13px}
  .ribbon .wrap{padding:9px 18px;gap:6px}
  h1,.pagehead h1,.hero h1{font-size:clamp(31px,8.4vw,44px);line-height:1.04}
  h2{font-size:clamp(25px,6.6vw,34px)}
  .hero .sub,.pagehead .sub{font-size:17px}
  section{padding:44px 0}
  .cta-row{gap:10px}
  .cta-row .btn{width:100%;justify-content:center}
  .cta-note{font-size:13.5px}
  .tiles,.rowgrid,.svclist,.outcomes,.points,.seasons,.incl,.qa,.two,.price{grid-template-columns:1fr!important}
  .cell,.col,.season,.incl div{padding:20px 0;border-left:0!important;padding-left:0!important}
  .cell+.cell,.col+.col,.season+.season,.incl div+div{border-top:1px solid var(--hair)}
  .leg{grid-template-columns:1fr!important;gap:6px}
  .foot-top,.foot-cols{grid-template-columns:1fr!important}
  .foot-top{padding:32px 0;gap:18px}
  .foot-top .side{align-items:stretch}
  .foot-bar{flex-direction:column;gap:10px;padding-bottom:32px}
  .modal .box{padding:22px;border-radius:18px;max-height:88vh}
  .modal li{font-size:15.5px}
  form{flex-direction:column}
  input{min-width:0;width:100%}
  form .btn{width:100%;justify-content:center}
}
@media(max-width:620px){
  .photos{grid-template-columns:1fr!important}
  .grid{grid-template-columns:1fr!important}
}

/* scroll reveal — motion without touching layout */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}
}

/* ---- centred composition ---- */
.hero .wrap>div,.pagehead .wrap{text-align:center;margin-left:auto;margin-right:auto}
.hero h1,.pagehead h1{margin-left:auto;margin-right:auto}
.hero .sub,.pagehead .sub{margin-left:auto;margin-right:auto}
.hero .cta-row,.pagehead .cta-row{justify-content:center}
section>.wrap>.eyebrow,section>.wrap>h2,section>.wrap>.subtitle{display:block;text-align:center;margin-left:auto;margin-right:auto}
section>.wrap>h2{max-width:20ch}
section>.wrap>.subtitle{max-width:52ch}
section>.wrap>.cta-row{justify-content:center}
.foot-top{text-align:center;justify-items:center}
.foot-top h2{margin-left:auto;margin-right:auto}
.foot-top .side{align-items:center}
@media(max-width:860px){
  .foot-cols,.foot-bar{text-align:center}
  .foot-bar{align-items:center}
  .foot-cols a{margin-left:auto;margin-right:auto}
}

/* ---- pull content off the left edge; centre the compact blocks ---- */
.wrap{max-width:1120px}
:root{--gutter:clamp(24px,6vw,80px)}

.cell,.col,.season,.addon,.fig{padding-left:26px;padding-right:26px;text-align:center}
.cell+.cell,.col+.col,.season+.season{padding-left:26px}
.cell p,.col p,.season p,.addon p{margin-left:auto;margin-right:auto;max-width:34ch}
.addon .ic,.step .n,.ben .ic{margin-left:auto;margin-right:auto}

.price .big{padding-left:26px;padding-right:26px;text-align:center}
.price p{margin-left:auto;margin-right:auto;max-width:36ch}

.svclist .li{padding-left:22px;padding-right:22px}
.tile,.oc{text-align:center}
.tile p,.oc p{margin-left:auto;margin-right:auto;max-width:30ch}

.qa{padding-left:26px;padding-right:26px}
.sl{padding-left:22px;padding-right:22px}
.leg{padding-left:26px;padding-right:26px}

.foot-cols{padding-left:8px;padding-right:8px}
@media(max-width:860px){
  .cell,.col,.season,.addon,.fig,.price .big,.qa,.sl,.leg,.svclist .li{padding-left:0;padding-right:0}
}

/* ---- oversized primary call to action ---- */
.btn-xl{padding:40px 54px;font-size:clamp(19px,2vw,26px);font-weight:700;border-radius:28px;letter-spacing:-.02em;line-height:1.1}
.cta-row.big{gap:16px;margin-top:38px}
.cta-row.big .cta-note{font-size:16px}
@media(max-width:860px){
  .btn-xl{padding:26px 28px;font-size:18px;width:100%;justify-content:center;border-radius:22px}
}

.cta-row.big{flex-direction:column;align-items:center}
.cta-row.big .btn-xl{width:auto;min-width:min(520px,100%)}
.cta-row.big .btn:not(.btn-xl){margin-top:2px}
.cta-row.big .cta-note{margin-top:2px}
@media(max-width:860px){.cta-row.big .btn{width:100%;justify-content:center}}

/* ---- the quiet call ----
   One page carries one oversized call. A section that repeats an offer already
   made above it gets a text link instead, so the two do not compete and the
   link can be dropped without leaving a hole in the layout. */
.textcall{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:30px;text-align:center}
.textcall a{font-weight:700;text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:2px;text-decoration-color:var(--lime);transition:text-decoration-color .15s}
.textcall a:hover{text-decoration-color:var(--ink)}

/* exactly three times the standard 46px button */
.btn-xl{min-height:138px;padding:0 64px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
@media(max-width:860px){.btn-xl{min-height:104px;padding:0 24px}}

/* secondary buttons: half again as tall as a standard one */
.btn-line:not(.btn-xl),.btn-ink:not(.btn-xl),.btn-cream:not(.btn-xl){min-height:69px;padding-top:0;padding-bottom:0}

/* footer call to action sits centred under the statement */
.foot-top{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}
.foot-top h2{margin:0 auto}
.foot-top .side{align-items:center;text-align:center}
@media(max-width:860px){.btn-line:not(.btn-xl),.btn-ink:not(.btn-xl){min-height:58px}}

/* ---- the navigation is a pill that floats over the page ----
   Edvin picked the shape off fitplus.co: one capsule, centred, hugging its own
   content, sitting ON the hero rather than above it. So `nav` keeps its place
   in the flow (sticky needs that) and pulls the next section up underneath
   itself with a negative margin; the hero and the page heads get that height
   back as padding, so nothing ever sits behind the pill. */
nav{position:sticky;top:14px;z-index:50;background:transparent;border-bottom:0;margin-bottom:-78px}
nav>.wrap{width:max-content;max-width:calc(100% - 2*var(--gutter));margin-inline:auto;height:auto;
  padding:9px 9px 9px 24px;gap:clamp(18px,2.4vw,30px);
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(26,26,26,.09);border-radius:var(--pill);
  box-shadow:0 12px 34px rgba(26,26,26,.13)}
nav .navlinks{gap:clamp(16px,1.9vw,26px)}
nav .navlinks a.btn{padding:13px 22px}
.hero{padding-top:78px}
body .pagehead,body .lead{padding-top:clamp(112px,10vw,150px)}

@media(max-width:860px){
  nav{top:10px;margin-bottom:-68px}
  nav>.wrap{width:auto;max-width:none;margin-inline:var(--gutter);padding:8px 8px 8px 16px}
  .navlinks{top:calc(100% + 10px);left:0;right:0;border:1px solid rgba(26,26,26,.09);border-radius:22px;
    padding:10px 18px 16px;box-shadow:0 16px 34px rgba(26,26,26,.16)}
  .navlinks a:last-of-type{border-bottom:0}
  .hero{padding-top:64px}
  body .pagehead,body .lead{padding-top:96px}
}

/* the figures row sat hard against the bottom edge of the film */
.hero + .wrap > .rowgrid{margin-top:14px}

/* ---- hero: the film fills it, the words sit on top ---- */
.hero{position:relative;overflow:hidden;background:#0e0e0e;min-height:clamp(560px,76vh,840px);display:grid;align-items:center}
/* object-fit:cover centres what it crops, so a tall viewport cut the top off the
   film and left a black band that looked like a broken element. Anchor it to the
   top: the crop now comes off the bottom, where there is nothing to lose. */
.hero .herobg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;z-index:0;pointer-events:none}
.hero .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,8,.74) 0%,rgba(8,8,8,.5) 44%,rgba(8,8,8,.84) 100%)}
.hero>.wrap{position:relative;z-index:2}
.hero h1{color:#fff}
.hero p.sub{color:rgba(255,255,255,.9)}
.hero .btn-line{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.hero .btn-line:hover{background:rgba(255,255,255,.14)}

/* the two secondary calls sit beside each other under the primary.

   A column, not a wrapping row: as a row the pair only LOOKED centred while the
   primary happened to be wider than it, and went off-axis from the headline the
   moment it was not. */
.cta-row.big{flex-direction:column;align-items:center}
.cta-pair{display:flex;gap:12px;align-items:stretch;justify-content:center;width:min(520px,100%)}
.cta-pair .btn{flex:1 1 0;min-width:0;width:auto;padding-left:20px;padding-right:20px;text-align:center;white-space:normal;line-height:1.2}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--soft)}

/* Three buttons on one dark film need three different edges, or they read as
   one object broken into pieces. The two secondaries get a hairline in the
   opposite colour to their fill. The primary gets a thick ring set IN from the
   edge, so a band of lime shows outside it — a ring at the edge would just look
   like a border, and this is meant to look like a different class of thing. */
.btn-ink{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9)}
.btn-white{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-lime.btn-xl{position:relative}
.btn-lime.btn-xl::after{content:"";position:absolute;inset:5px;border:3px solid var(--ink);
  border-radius:23px;pointer-events:none}
@media(max-width:860px){.cta-row.big .cta-pair .btn{width:auto}.cta-pair{gap:10px}}

/* one hairline between the last band and the footer, and no gap across it */
footer{margin-top:0}
.meshband+footer{border-top:0}

/* the season/setup figures run flat, four across, like every other row here */
.figrow .cell{display:flex;flex-direction:column;align-items:center}
.figrow .k{min-height:3em;display:flex;align-items:center;justify-content:center;text-align:center}
.figrow .n{white-space:nowrap;font-size:clamp(22px,2.6vw,34px)}
.figrow .cell p{max-width:30ch}
@media(max-width:860px){.figrow .k{min-height:0}}
.figrow.two-up{grid-template-columns:repeat(2,1fr)}
.figrow.two-up .n{font-size:clamp(26px,3.2vw,42px)}
.figrow.two-up .cell p{max-width:34ch}